Question

来自标题本身。我是新来的人，我想知道您如何将已经“传递”的数据从父级更新为子级。我有一个警报组件，该组件将根据Axios请求后获取的数据显示错误消息。

父母 ..

    this.state = { 
                formContact: { 
                    fullname: '',
                    contact:'',
                    email: '',
                    message: ''
                },
                formAlert: { alertMessage: 'default'}
            };

     handleClick() {

            let rm = this;
            axios({
                method: 'post',
                url: 'submit',
                data: {
                    form: this.state.formContact
                    }
                })
                .then(function (response) {
                    let data = response.data.data;
                    rm.setState({ 
                        formAlert: { alertMessage: 'test' }
                    });

                }).catch(function (response) {
                    //handle error
                    console.log(response);
                });
        }

  render() {
        return (
            <div className="row">
               <Alert data={this.state.formAlert}  />
            </div>
       );
    }
}

孩子

class Alert extends Component {
    constructor(props) {
        super(props);
        console.log(props);

        // Holds the form state and input boxes
        this.state = { 
            formError: { 
                icon: '',
                header: '',
                message: '',
                errorType: 'errormsg'
            }
        };
    }
    render() {
        return (
            <div className={'style-msg ' + this.state.formError.errorType}>
                <div className="sb-msg"><i className="icon-thumbs-up"></i>
                    <strong>Well done!</strong>
                    {this.state.formError.message}
                </div>
                <button type="button" className="close" data-dismiss="alert" aria-hidden="true">×</button>
            </div>
        );
    }
}

似乎我无法将formAlert.alertMessage更新为“测试”，并将新数据“测试”传递给孩子。

任何帮助将不胜感激。谢谢

Answer 1

当您将数据传递到Alert组件时，

<Alert data={this.state.formAlert}  />

但是在Alert组件中，您从未使用过该数据。

我认为不是这个，

{this.state.formError.message}

您应该使用此

{this.props.data.alertMessage}

更新

为了将props设置为state，

formError: { 
   icon: '',
   header: '',
   message: props.data.alertMessage,
   errorType: 'errormsg'
}

现在您可以使用了，

{this.state.formError.message}

在首次呈现Alert组件的状态后数据发生变化时，将不会获取新数据，为此，您需要componentDidUpdate方法，

componentDidUpdate(prevProps, prevState) {
  if (prevProps.data.alertMessage !== this.props.data.alertMessage) {
    let formError = {...this.state.formError};
    formError.message = this.props.data.alertMessage
    this.setState({formError},()=>console.log(this.state.formError.message))
  }
}

Answer 2

您的Child Component应该使用数据道具来显示警报。

    class Alert extends Component {
    constructor(props) {
        super(props);
        console.log(props);

        // Holds the form state and input boxes
        this.state = { 
            formError: { 
                icon: '',
                header: '',
                message: '',
                errorType: 'errormsg'
            }
        };
    }
    render() {
        return (
            <div className={'style-msg ' + this.state.formError.errorType}>
                <div className="sb-msg"><i className="icon-thumbs-up"></i>
                    <strong>Well done!</strong>
                    {this.props.data.alertMessage}
                </div>
                <button type="button" className="close" data-dismiss="alert" aria-hidden="true">×</button>
            </div>
        );
    }
}

在Axios请求反应之后，将传递的数据从父级更新为子级

2 个答案: