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

Question

我有一个组件，在该组件中我想显示取决于 props 值的状态。我总是遇到错误并且无法在网上找到好的示例。

这是我的组件(如下)，我想在 this.props.passRecoveryEditSuccess.password_changed 等于 1 时显示 this.state.msg 值

我编写了 massage 函数，该函数应该根据从 reducer 返回的内容来设置 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 获取更新的 props，因此 componentDidUpdate() 触发，条件通过，然后您调用 this.massage()

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

您可以做的是在 componentDidUpdate() 中获取 prevProps 参数，并使用它来创建更 protected 条件。

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

这样，您就表示只有当属于前一个渲染的 props 与新渲染不相等时，您才会调用 this.massage()。