你如何维护 reactjs/redux 应用程序列表中的选定项目？答案

【问题标题】：How do you maintain selected item in list in reactjs/redux application?你如何维护 reactjs/redux 应用程序列表中的选定项目？
【发布时间】：2017-05-15 00:03:06
【问题描述】：

我是 reactjs/redux 应用程序世界的新手。我正在创建一个具有页面布局的 Web 应用程序，其中左侧有一个名称列表，右侧显示所选名称的详细信息。

使用 redux，当从列表中选择一个名称时，应用程序会分派一个 ajax 调用来获取详细信息。这最终会使用选定的详细信息更新 redux 状态，并导致详细信息组件使用信息进行更新。

名称列表是使用 ag-grid 创建的，因此它能够突出显示所选项目。但是一旦 redux 状态更新，所有组件似乎都会重新呈现，并且列表中的选定项目不再被选中。我猜一般来说，名称列表的状态会在页面加载时回到初始状态（即，如果列表被过滤，则不再被过滤）。

在选择一个项目之前，我如何维护所选项目（以及该列表上所做的所有其他事情）？我几乎在想我也必须在我的 redux 状态下保持网格状态......但这是对的吗？这是我唯一的选择吗？

我的组件的结构是一个容器组件（WSContainer），它有两个子组件，NameTable 和 NameDetails。

【问题讨论】：

标签： reactjs redux ag-grid-react

【解决方案1】：

我建议您发送一个将 selectedId 保存为 redux 状态的操作。我还建议将您返回的每个详细信息存储在一个对象中，其中 id 作为键，详细信息作为值

detailsById: {
  id1: detail1,
  id2: detail2
},
selectedId: id1

这样您就不必在显示详细信息之前等待 ajax 调用返回。此时，您只需显示与您保存为 selectedId 的 id 匹配的详细数据。

查看this 了解有关 redux 操作的更多信息。

【讨论】：

【解决方案2】：

为什么不将所选项目的值、索引或文本保留在状态内？然后，当页面呈现时，您可以使用 componentDidMount 或 componentWillMount 方法突出显示选定的名称（或您想要做的任何其他操作）。

https://facebook.github.io/react/docs/react-component.html

【讨论】：