ReactJS中componentWillReceiveProps未触发问题咨询

你遇到的核心问题是把React元素直接存在了组件state中，这会导致这些元素在创建时就“固化”了当时的formData值。后续父组件状态更新时，state里的slides数组本身并没有变化（还是原来的那些React元素对象），所以React认为子组件的props没有更新，自然不会触发componentWillReceiveProps（或者现在更推荐的getDerivedStateFromProps/useEffect）。

而你直接在Slider里写死子组件的场景能正常工作，是因为每次父组件状态更新时，render函数都会重新执行，重新生成子组件并传递最新的formData，React会对比出props的变化，进而触发子组件的生命周期钩子。

我们应该在state中存储生成组件的配置数据，而不是直接存储React元素，在render阶段动态生成组件，这样每次父组件状态更新时，render都会重新计算子组件的props，确保子组件能接收到最新的formData。

修改后的代码示例： #

// 初始化时存储配置数据，而非React元素
componentDidMount() {
  this.setState({ 
    slidesConfig: [
      { key: 1, component: Slide1 },
      // 其他slide的配置...
    ] 
  });
}

render() {
  const { formData, slidesConfig } = this.state;
  return (
    <Slider ref={c => this.slider = c } {...settings}>
      {slidesConfig.map(config => (
        <div key={config.key}>
          {/* 每次render都会用最新的formData生成子组件 */}
          <config.component key={config.key} formData={formData} />
        </div>
      ))}
    </Slider>
  );
}

为什么这样能解决问题？ #

• 当父组件的formData更新时，render函数会重新执行，slidesConfig.map会重新生成每个子组件元素，并传递最新的formData作为props。
• React会对比新旧子组件的props，发现变化后触发子组件的componentWillReceiveProps（或对应的更新钩子），实现状态同步。

完全不需要使用Redux来解决这个问题！这个问题的本质是React元素的渲染时机和状态存储方式的问题，和全局状态管理无关。只要调整存储的内容（存配置而非元素），就能在组件内部状态管理的范围内解决问题。

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