在componentWillReceiveProps中调用setState时能否使用nextProps参数？

嘿，这个问题问得很细致！咱们直接切入核心：完全可以在componentWillReceiveProps中使用nextProps来调用setState，而且有两种常用写法，对应不同的场景：

1. 直接传递state对象的浅合并写法 #

这就是你提到的方式，直接把nextProps的值映射到要更新的state对象里，适合简单的状态更新场景：

componentWillReceiveProps(nextProps) {
  // 直接用nextProps更新state，搭配可选的回调函数
  this.setState({ data: nextProps.data }, myCallBack);
}

这种写法简单直接，但如果你的新state需要结合旧state和nextProps共同计算，它就不太适用了——这时候就得用函数式的setState写法。

2. 函数式setState结合nextProps #

函数式setState的签名是setState((prevState, props) => stateChange[, callback])，不过这里要特别注意：函数里的props参数是调用setState时组件当前的旧props，而不是即将到来的nextProps。所以在componentWillReceiveProps里，我们需要直接引用nextProps来计算新状态：

componentWillReceiveProps(nextProps) {
  this.setState((prevState) => {
    // 这里直接使用nextProps，而非函数参数里的props
    return {
      total: prevState.currentTotal + nextProps.additionalAmount
    };
  }, () => {
    console.log("状态更新完成，此时props已经是新的了");
  });
}

这种写法的优势在于，它能确保你基于最新的prevState和即将到来的nextProps来计算状态，避免了因为状态更新异步性导致的计算错误。

额外提醒 #

要注意的是，React官方现在已经不推荐使用componentWillReceiveProps这个生命周期方法了，它容易引发一些不可预测的状态问题。如果是新的项目，更推荐用：

• 类组件：static getDerivedStateFromProps(nextProps, prevState)（这个方法本身就是接收nextProps作为参数，专门用于根据props更新state）
• 函数组件：结合useState和useEffect，监听props变化来更新状态

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