在 Axios 请求反应后更新从父级到子级的传递数据答案

【问题标题】：Update Passed Data from Parent to Child After Axios Request React在 Axios 请求反应后更新从父级到子级的传递数据
【发布时间】：2019-12-15 01:06:07
【问题描述】：

从标题本身。我对反应还很陌生，想知道您将如何将已经“传递”的数据从父级更新到子级。我有一个警报组件，它将根据 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 更新为“test”并将新数据“test”传递给孩子。

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

【问题讨论】：

标签： reactjs axios

【解决方案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))
  }
}

【讨论】：

是的，它有效。但是，我希望在 Child 的 this.state.formError 上设置 props.data.alertMessage。消息，然后渲染更新的对象@ravibagul91
试过了。但是 state.formError.message 仍然使用相同的值，而不是来自我希望的 axios 结果。 @ravibagul91
组件重新渲染后父数据更新时最好使用props，不需要使用state
@ravibagul91 谢谢它真的有效。但我也设法找到了我的解决方案。只是一个问题，尽管我使用了 this.alert = React.createRef();并在 Alert.js 中创建了一个名为 update(data) 的函数，其中 data 存储了 axios 中接受的新更新数据。我的解决方案也正确吗？还是以正确的方式使用 componentDidUpdate？谢谢
是的。 ref 可用于从子组件触发功能，但仅适用于class based component，不适用于functional component。

【解决方案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>
        );
    }
}

【讨论】：