Question

我想知道为什么setState不适用于特定属性。

在我的componentWillReceiveProps（nextProps）中，我设置了各种状态变量的状态。但只有其中一个没有设定。但是，当我打印nextProps时，我可以清楚地看到特定状态变量的更新道具。

例如：

this.state = {
    job: { jobId: null, name: null},
    list: { items: null, total: null}
}

componentWillReceiveProps(nextProps) {
// When I print nextProps, it is showing the updated prop value
    /* nextProps: {
                   job: 
                      {
                        jobId: 123, 
                        name: "sai"
                      }, 
                   list: 
                      {
                        items: 25, 
                        total: 150
                      }
                  }
      */

 this.setState({
      job: nextProps.job,
      list: nextProps.list
 });
 console.log(this.state.job); // gives me -> job: { jobId: null, name: null}
 console.log(this.state.list); // gives me -> list: { items: 25, total: 150}
}

当我将输出打印到控制台this.state.job时，它正在打印初始状态而不是更新状态。我不确定如何解决这个问题。

Answer 1

在设置状态时使用回调，因为setState是异步的，您必须等待结果直到完成其工作。

this.setState({
      job: nextProps.job,
      list: nextProps.list
 },function(){
  console.log(this.state) //here you will get updated values.
 });

Answer 2

这是因为setState以异步方式工作，并且在您记录它时还没有完成设置新状态。

尝试这样做，请参阅日志

this.setState({
      job: nextProps.job,
      list: nextProps.list
 },()=>console.log(this.state);

为什么setState没有设置状态componentWillReceiveProps？

2 个答案: