React js-显示状态值取决于 redux props 值

Question

我有一个组件，我想在该组件中显示状态取决于 props 值的值。我总是出错，在网上找不到好的例子。

这是我的组件（如下），我想在 this.props.passRecoveryEditSuccess.password_changed 等于 1

时显示 this.state.msg 值

我编写了 massage 函数，它应该设置 msg 的状态取决于从减速器返回的内容。

问题是我不断得到即将到来的结果：

我该如何解决这个问题？

`

import React, { Component } from 'react';
import {Form, Alert, FormGroup, Col, Button, FormControl, Grid} from 'react-bootstrap';
import {connect} from 'react-redux';
import {Link} from 'react-router-dom';
import Header from '../header/Header';
import { PassRecoveryEdit } from '../../actions/ajax';

class PasswordRecoveryEdit extends Component {
    constructor(props){
        super(props);
        this.state ={
            password: '',
            confirmPassword: '',
            msg: ''
        } 
    }

    componentDidUpdate(){
        if(this.props.passRecoveryEditSuccess){
            this.massage()
        }
    }
    onChange = (e) => {
       this.setState({
            [e.target.name]: e.target.value
        })  
    }


    formValidation = () => {
        let isError = false;
        const errors = {};

        if(this.state.password.length < 6){
            isError =  true;
            errors.passwordLengthError = "על הסיסמה להיות ארוכה מ 6 תווים"
          }else{
            isError =  false;
            errors.passwordLengthError = ""
          }

          if( this.state.confirmPassword !==  this.state.password){
            isError =  true;
            errors.passwordMatchError = "הסיסמאות לא תואמות"

          }else{
            isError =  false;
            errors.passwordMatchError = ""
          }

        this.setState({
            ...this.state,
            ...errors
        });
        return isError
    }

    onSubmit = (e) => {
        e.preventDefault();
        //console.log('onSubmit');
        //console.log('this.state', this.state);

        let obj = {
            password: this.state.password,
            token: this.props.match.params.token
        }
    let err = this.formValidation();
        if(!err){
            this.props.PassRecoveryEdit(obj);
        // console.log('success');
        }

    }

    massage = () => {
        if(this.props.passRecoveryEditSuccess.password_changed == 1){
            this.setState({msg: 'הסיסמה עודכנה בהצלחה '});
        }else{
            this.setState({msg: 'הסיסמה לא עודכנה בהצלחה'});
        }
    }


    render() {
        return (
            <div>
                <Header headline="הזינו סיסמה חדשה"/>
                <Grid>
                    <Form horizontal onSubmit={this.onSubmit.bind(this)}>  
                        <FormGroup>
                            <FormControl 
                                ref="password"
                                name="password"
                                id="password"
                                type="password"
                                placeholder="הקלידו את הסיסמה"
                                aria-label="הקלידו את הסיסמה"
                                onChange={this.onChange.bind(this)}
                            />    
                        </FormGroup>
                        {this.state.passwordLengthError  &&
                            <Alert variant="danger" className="text-right">
                                {this.state.passwordLengthError}
                            </Alert>    
                        }

                        <FormGroup>
                            <FormControl 
                                ref="confirmPassword"
                                name="confirmPassword"
                                id="confirmPassword"
                                type="password"
                                placeholder="הקלידו הסיסמה שנית"
                                aria-label="הקלידו הסיסמה שנית"
                                onChange={this.onChange.bind(this)}
                            />    
                        </FormGroup>
                        {this.state.passwordMatchError  &&
                            <Alert variant="danger" className="text-right">
                                {this.state.passwordMatchError}
                            </Alert>    
                        }
                        <FormGroup>
                        <Col xs={12}>
                          <Button className="full-width-btn" type="submit">שינוי סיסמה</Button>
                        </Col>
                      </FormGroup>
                    </Form>

                    {this.state.msg && 

                        <Alert variant="danger" className="text-right">

                        {this.state.msg}

                    </Alert>   
                    }
                </Grid>
            </div>
        )
    }
}

const mapStateToProps = state => {
    return{
            passRecoveryEditSuccess: state.userReducer.passRecoveryEdit
    }
}


export default connect(mapStateToProps, {PassRecoveryEdit})(PasswordRecoveryEdit)

`

Answer 1

您正在创建一个无限循环。 componentDidUpdate() 每当您的组件中的状态或道具发生变化时都会被调用。所以在第一次渲染之后，你从 redux 得到更新的道具，所以 componentDidUpdate() 触发器，条件通过并且你调用 this.massage()

然后 this.massage() 更新组件的状态，重新触发 componentDidUpdate()，它在调用 this.massage() 之前检查完全相同的条件，因此创建了循环。

你可以做的是在 componentDidUpdate() 中使用 prevProps 参数，并用它来创建一个更受保护的条件。

componentDidUpdate(prevProps){
    if(this.props.passRecoveryEditSuccess !== prevProps.passRecoveryEditSuccess){
        this.massage()
    }
}

你是说只有当属于前一个渲染的道具不等于新渲染时你才会调用 this.massage()。

React js-显示状态值取决于 redux props 值

React js- show state value depends on redux props value

javascript

reactjs

redux

react-props