javascript - ReactJS componentWillReceiveProps不触发

我正在实现https://github.com/akiran/react-slick以外的滑块

我有自定义子组件，需要在父组件更新时更新其状态。当我正常加载幻灯片时，例如：

<Slider ref={c => this.slider = c } {...settings}>
  <div key={1}>
    <Slide1 key={1} formData={this.state.formData} />
  </div>
  ...
</Slider>

componentWillReceiveProps可以正常工作。但是，当我根据示例here动态加载幻灯片时，即使在父级中更新状态后，也永远不会调用这些生命周期事件。

componentDidMount() {
    this.setState({
        slides: [
            <div key={1}>
                <Slide1 key={1} formData={this.state.formData} />
            </div>,
            ....
        ]
    )};
}


<Slider ref={c => this.slider = c } {...settings}>
  {this.state.slides.map(function (slide, i) {
    return slide
  })}
</Slide>

像这样加载组件，即使状态更新后，也不会调用componentWillReceiveProps。

我想念什么？我不需要Redux来管理吗？

最佳答案

首先，尝试在状态中存储实际的React元素是一个非常糟糕的主意，您应该只存储纯数据，然后在render方法中使用纯数据来构成标记。

其次，在您的情况下不会调用componentWillReceiveProps，因为您的Slide1是第一次在此处渲染的，它们已被挂载到DOM上，但是componentWillReceiveProps仅可用于已经挂载的组件被调用，请参见documentation。