Question

我有一个React / Redux应用程序，可与Redux存储中存储的“处理程序”以及与这些处理程序建立连接的React组件一起使用。这些处理程序保存在规范化的平面结构中，并以唯一的ID相互引用。

我想做的就是每当他的任何后代更新商店中的模型时都更新一个react元素。

// Redux state
const state = {
  h1: { name: "1", child: "h2" },
  h2: { name: "2", child: "h3" },
  h3: { name: "3", child: null }
};

// Helper function
const GetName = h => (h.child ? `${GetName(state[h.child])} in ${h.name}` : h.name);

// Component.jsx
class Handler extends React.Component {
  render = () => (
    <div>
      <div>Component {this.props.model.name} ({GetName(this.props.model))}</div>
      {this.props.model.child && <Handler id={this.props.model.child} />}
    </div>
  );
}

export default connect(
  Handler,
  (state, ownProps) => ({
    model: state[ownProps.id]
  })
);

这是我的代码的简化示例。这里的输出应如下所示：

Component 1 (3 in 2 in 1)
Component 2 (3 in 2)
Component 3 ()

在我的代码中，GetName函数更为复杂，但是基本思想是它构建处理程序的“名称”。现在我的问题是当我更新第三个处理程序时，第一个处理程序的名称不会更新，因为react不会更新它的组件。

有没有一种方法可以告诉反应，只要下降处理程序的状态发生变化，或者还有其他更简单的方法，就应该更新该组件？

Answer 1

我建议将您的GetName帮助函数替换为reselect selector。为了使重新选择在这里起作用，您需要将GetName助手中的递归转换为首先迭代（e.g. something like this）。

当其后代更改时更新组件

1 个答案: