使用componentWillReceiveProps修改state后，render方法未更新状态的问题

嘿，我来帮你排查这个问题！你遇到的情况其实是两个常见的React生命周期陷阱导致的，咱们一步步拆解：

核心问题1：错误使用了旧props做判断 #

你在componentWillReceiveProps里判断的是this.props.favList，但这个方法的next参数才是即将更新的新props啊！原来的逻辑里，当父组件传递新的favList过来时，你还是在拿旧的this.props.favList做判断，这就导致state根本没正确触发更新——哪怕你控制台打印了，那也是旧props对应的state，自然render里还是旧状态。

核心问题2：误解了setState的异步性 #

setState是异步操作，你在调用它之后立刻console.log(this.state)，打印的其实还是更新前的state，这会给你一种“state已经变了”的错觉。要查看真正更新后的state，得用setState的第二个回调参数。

解决方案 #

方案1：修正componentWillReceiveProps的逻辑（临时过渡） #

如果暂时不想换生命周期方法，先把判断条件改成用next参数，同时修正setState的打印方式：

componentWillReceiveProps(next) {
  console.log('45', next);
  // 用next（新props）做判断，而不是this.props（旧props）
  if (next.favList) {
    this.setState({ favRest: next.favList }, () => {
      // 回调里才能拿到更新后的state
      console.log('setting state', this.state);
    });
  } else if (next.EventList) {
    this.setState({ loading: false, EventList: next.EventList });
  }
}

方案2：改用React推荐的新生命周期方法（推荐） #

componentWillReceiveProps已经被React标记为废弃了，官方推荐用static getDerivedStateFromProps来处理props到state的映射，这个方法是静态的，能避免很多生命周期的坑：

static getDerivedStateFromProps(nextProps, prevState) {
  // 基于新props和旧state判断是否需要更新state
  if (nextProps.favList) {
    return { favRest: nextProps.favList };
  } else if (nextProps.EventList) {
    return { loading: false, EventList: nextProps.EventList };
  }
  // 不需要更新state时返回null
  return null;
}

这个方法会在props变化、组件初始化时都触发，返回的对象会合并到state中，完全符合React的最新规范。

验证方法 #

修改后，你可以在render方法里打印this.state.favRest，或者直接在页面上渲染这个值，就能看到它跟着新的favList更新了。

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