React子组件接收新Props不更新，setState无效果求助

老哥，我帮你拆解下可能导致这个问题的几个常见原因，咱们一步步来排查：

1. 先确认父组件的状态是否真的更新了 #

首先得检查父组件Recipes里的componentDidMount是否正确更新了recipes状态。比如你是不是在获取数据后，正确调用了this.setState({ recipes: 新数据 })？

如果父组件的recipes状态根本没变化，那子组件接收的props自然不会更新，componentWillReceiveProps也不会触发。你可以在父组件的render里加个console.log(this.state.recipes)，看看数据是否真的更新了。

另外，如果你的recipes是数组/对象，一定要注意不要直接修改原引用！比如：

// 错误做法：直接修改原数组，React浅比较会认为状态没变化
this.state.recipes.push(newRecipe);
this.setState({ recipes: this.state.recipes });

// 正确做法：创建新的数组/对象引用
this.setState({ recipes: [...this.state.recipes, newRecipe] });

React的状态更新依赖引用变化，直接修改原数据的话，浅比较会判定状态未改变，不会触发重新渲染，子组件自然拿不到新props。

2. 检查子组件componentWillReceiveProps的逻辑 #

首先注意：componentWillReceiveProps在React v16.3及以后已经被标记为废弃了，推荐用getDerivedStateFromProps或者componentDidUpdate替代，但先解决当前问题：

• 你有没有在componentWillReceiveProps里先判断nextProps和当前this.props是否不同？如果没有判断，可能会导致不必要的setState，甚至因为引用没变化而没生效。比如：

componentWillReceiveProps(nextProps) {
  // 先判断props是否真的变化了
  if (nextProps.recipes !== this.props.recipes) {
    this.setState({ childRecipes: nextProps.recipes });
  }
}

• 另外，setState是异步的，如果你在调用后立刻去读this.state，可能拿不到最新值。可以通过setState的第二个回调来验证：

this.setState({ childRecipes: nextProps.recipes }, () => {
  console.log('子组件状态更新后的值：', this.state.childRecipes);
});

看看这个回调里的输出是否正确，就能知道setState是否真的执行了。

3. 确认子组件是否正确接收了props #

检查父组件render里传递给子组件的props名称是否和子组件接收的一致？比如父组件写的是<Child recipes={this.state.recipes} />，子组件里是不是用this.props.recipes来接收？别把props名称写错了，这种低级错误很容易犯。

4. 有没有可能子组件是纯组件？ #

如果子组件是用React.PureComponent创建的，它会做props的浅比较。如果父组件传递的props是复杂对象，浅比较认为没变化的话，也不会触发更新。这时候你需要确保传递的props引用是新的，或者在子组件里用shouldComponentUpdate自定义比较逻辑。

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