Javascript React/redux+；引导，使模态显示对组件唯一

我有一个组件，它显示一个模式，在我的地图中弹出一些内容。我有一个非常直接的设置：

JSX如下所示：

  <Modal show={this.props.results.showPreviewModal} >
         {myPreviewContent}
  </Modal>

及其还原剂：

case actions.PREVIEW_ASSET:
      return state.set('currentPreview', action.currentResult).set('showPreviewModal', true);

case actions.CLOSE_PREVIEW_MODAL:
      return state.set('showPreviewModal', false);

现在，这似乎很有效。但是，问题在于，内部具有模态的组件位于映射中，因为它是一个单一的搜索结果（每个结果组件都有一些功能，因此映射结果的是它自己的组件）。问题是，如果我有10个结果，当我单击触发

previewAsset

操作的按钮时，此模式将打开10次

---

这是有道理的，因为所有组件都可以访问

showPreviewModel

，但我想知道的是，是否有办法使每个组件的then分别唯一，因此只有1个模式打开，而不是所有10个。不确定如何在react/redux中处理此问题，非常感谢您的建议，谢谢

我成功使用的一种方法是将模态组件从循环中拉出（在本例中为

map（）

），并为

currentItem

或类似对象设置一个减速机，该减速机在选择项时设置（您也可以使用

currentItemIndex

，然后根据

connect（）

调用中的内容选择当前项目）

在父组件中，您将模态作为子组件，并且仅当

currentItem

不为空时才显示它

下面是一个快速的JSBin示例，向您展示我的意思：

---

你有10个

的实例吗？顺便说一下，redux还原程序不能修改现有状态。它们应该始终返回新状态。这正是我最终要做的，所以我会将其标记为正确的。谢谢！我想说，尽管我使用了短语“quick”JSBin，但可能花了很长的30分钟来激发lol

case actions.PREVIEW_ASSET:
      return state.set('currentPreview', action.currentResult).set('showPreviewModal', true);

case actions.CLOSE_PREVIEW_MODAL:
      return state.set('showPreviewModal', false);