Question

我正在从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（哑）组件永远不会出现，即使所有内容都成功发送而没有状态变异。

可能是什么原因？谢谢！

Answer 1

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

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

Answer 2

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

在调整后的代码段下方。

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

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

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

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

Redux＆amp; React：调用componentDidUpdate但重新生成并没有发生

2 个答案: