Question

我故意发送一个错误的响应，检查一切是否正常，但第一个请求我得到成功响应（但它失败了），并且只在一秒钟后我收到错误。似乎在第一次呼叫后状态没有更新或没有时间更新。

问题：为什么在第一个ajax请求中我没有得到失败的情况

更新

我添加了代码，但没有任何改变。我还从保存功能中删除了代码

 componentWillReceiveProps(nextProps) {
    if (this.props.product.id != nextProps.product.id) {
        this.setState({product: Object.assign({}, nextProps.product)});
    }

    if(this.state.saving) {
        if(this.props.errorMessage) {
            toastr.error(this.props.errorMessage)
        } else {
            toastr.success('Product saved');
        }

        this.setState({saving: false});
    }
}

Answer 1

您的ajax调用是异步的，但您在启动ajax请求后立即评估errorMessage属性。第一次发出ajax请求时，errorMessage属性将被取消定义，因此您将立即转到else案例，调用toastr.success('Product saved');

同时，ajax请求将失败，更新errorMessage属性。发送第二个ajax请求后，代码将再次立即评估errorMessage属性，但这次它将包含第一个请求返回的错误，并将调用toastr.error(this.props.errorMessage);

一般来说，以预期的方式使用React.js是个好主意。如果要执行更新this.props内容的操作，可以通过覆盖props函数来侦听对componentWillReceiveProps(nextProps)对象的更改。当您致电dispatch(something)时，您的组件将收到更新。您可以检查nextProps以查看errorMessage属性是否已更改，并从那里调用toastr方法。

有关详细说明，请参阅https://facebook.github.io/react/docs/react-component.html#componentwillreceiveprops

上的文档

第二次ajax调用后，React.js状态日期变为正确

1 个答案: