Question

我有一个通过单击按钮调用的方法。在这种方法中，我在true或false之间切换了一些状态。切换状态后，我需要向服务器更改我刚刚更改过的状态的XHR请求。

handleButtonClick = () => {
    //toggle 'in_progress' state attribute to false or true
    this.toggleInProgressState();

    //redux widget state
    const { state } = this.props;

    //Send data to server 
    const data = {};
    data.in_progress = state.in_progress;
    axios.patch(`/api/v1/somewhere}/`, data)
        .then((response) => {
            console.log(response);
        })
        .catch((error) => {
            console.log(error);
        });
}

我遇到的问题是，我发送到服务器的状态不是应用程序的实际状态。我相信这很可能是因为React尚未完成渲染。在发送XHR之前，如何确保React已经完成状态更新？

谢谢！

Answer 1

this.setState是一个异步函数。在this.setState的回调中发出xhr请求。这样，您就可以处理更改后的状态。

this.setState({someState: someState}, ()=>{
   yourXhrRequest() //Here the state has changed
});

Answer 2

对不起，现在我看到您正在使用Redux。在这里，您可以使用componentWillReceiveProps生命周期方法，并将新状态与旧状态进行比较。如果已更改，则可以提出XHR请求。这是您将redux状态与props匹配的时候。

componentWillReceiveProps(nextProps){
  if(nextProps.yourState!==this.props.yourState){
    yourXhrRequest();
  }
}

React / Redux-根据状态更改创建XHR请求

2 个答案: