为何在componentWillReceiveProps中setState无法更新job状态？

兄弟，你这是踩了React setState异步性的坑啦！咱们先把问题拆解清楚：

• 首先，React的setState()是异步操作，你调用它之后，React并不会立刻更新state，而是会把更新请求放到队列里，等合适的时机再批量处理。所以你在调用setState()之后马上console.log(this.state)，拿到的肯定还是更新前的旧值。
• 那为啥list看起来好像更新成功了？大概率是因为nextProps.list和你初始state里的list是同一个引用的对象。当外部修改了这个对象的内容时，你console.log的时候看到的是修改后的对象内容，但这并不是setState同步更新的结果，只是引用指向的对象本身变了而已。而nextProps.job应该是一个新创建的对象，所以旧state里的job还是原来的初始对象，自然显示null。

正确查看更新后状态的方法 #

要想看到真正更新后的state，你得用setState()的第二个参数——回调函数，这个函数会在状态更新完成、组件重新渲染之后执行：

this.setState({ 
  job: nextProps.job, 
  list: nextProps.list 
}, () => {
  console.log(this.state.job); // 这里就能拿到更新后的job数据了
  console.log(this.state.list); // 这里的list才是真正通过setState更新后的结果
});

额外的重要提醒 #

还有个事儿得告诉你：componentWillReceiveProps已经在React 16.3版本被废弃了，官方现在推荐用getDerivedStateFromProps或者componentDidUpdate来处理props变化后的状态更新。比如换成componentDidUpdate的写法会更安全：

componentDidUpdate(prevProps) {
  // 先判断props是否真的变化了，避免不必要的setState
  if (prevProps.job !== this.props.job || prevProps.list !== this.props.list) {
    this.setState({
      job: this.props.job,
      list: this.props.list
    });
  }
}

这样能避开旧生命周期带来的一些潜在问题，代码也更符合React的新规范。

内容的提问来源于stack exchange，提问作者Sai