Redux & React：componentDidUpdate 被调用，但没有发生重新渲染答案

【问题标题】：Redux & React: componentDidUpdate is called but rerendering doesn't happenRedux & React：componentDidUpdate 被调用，但没有发生重新渲染
【发布时间】：2016-11-21 15:16:16
【问题描述】：

我正在从 Rest API 加载数据，Container 和 Presentational 组件接受它。

容器

componentWillMount() {
    this.props.load();
  }

componentDidUpdate() {
  console.log('updated');
}

render() {
  let view;

  view = this.props.data ? (<Foo data={this.props.data} />) : (<H2>Loading</H2>)

  return (
    <div>
      {view}
    </div>
  )
}

load - 成功加载时在 reducer 中获取数据和调度事件。

@Connect

function select(state) {
  const { data } = state.modules;

  return {
    data: data
  };
}

export default connect(select, {
  load: actions.data.load
})(ContainerComponent);

据我了解，当调度操作并且Container 组件从存储接收更新数据时，应该会发生重新渲染。

这很奇怪，根据文档，componentDidUpdate 在组件接收到更新的道具并重新渲染时被调用。

但是我的Foo（哑）组件永远不会出现，即使一切都在没有状态突变的情况下成功调度。

可能是什么原因？谢谢！

【问题讨论】：

您能否将实现mapStateToProps 和connect 组件的代码部分与redux 存储共享？
@Timo 更新问题
也许 this.props.data 总是假的？你能发布更完整的代码吗？
你能多展示一些代码吗？这里看起来一切正常，但我想看看连接如何与容器组件一起使用更多 IE 你是如何导出它的
只有在 connect 传入的 props 发生变化时，您的组件才会重新渲染。您可以发布您的减速器代码，因为它看起来没有更新状态吗？

标签： reactjs redux

【解决方案1】：

组件不重新渲染的最常见原因之一是您修改了状态，而不是返回应用了更改的状态副本。

Redux 文档的Troubleshooting 部分中提到了这一点。

【讨论】：

谢谢，在去之前我做了很多谷歌搜索，已经阅读了这篇文章，我的状态没有变异
@knitevision 好的，只是一个猜测 :) 很高兴听到你在问之前用谷歌搜索了很多，很多人没有。

【解决方案2】：

正如@kjonsson 所暗示的，问题在于您直接将state.modules.data 分配给select 对象 上的data 属性。该数据对象的引用永远不会改变，因此组件永远不会重新渲染。您需要做的是复制 state.modules.data 使用扩展运算符，这样每当state.modules.data 更改选择对象 上的data 字段时都会有一个新的引用.

下面是调整后的代码sn-p。

function select(state) {
  const { data } = state.modules;

  return {
    data: { ...data }
  };
}

export default connect(select, {
  load: actions.data.load
})(ContainerComponent);

如果这有帮助，请告诉我！

【讨论】：