Javascript 材料界面-单击按钮时，会多次打开

我有这个渲染（）

render（）{
const classes=this.useStyles（）；
返回(
{this.state.deadTopics.map（行=>(
{row.id}
打开警报对话框
奥拉

))}
);
}

它看起来不错，渲染效果如预期。 我的问题是： 元素deadTopics是一个数组，它生成表中的行，当我点击按钮打开模态时，它打开多个模态，而不是行中唯一一个特定的模态

我怎样才能防止这种情况发生？

---

我希望当我点击按钮打开模态时，它只显示特定模态。

这是因为您正在打开所有具有相同状态“setOpen”的模态。您需要为每一行指定不同的状态名称。每行都有一个唯一的状态名称，如下所示-

open={this.state['some-unique-name']}

example - `setOpen-${row.id}`

在onClick函数中-

onClick={() => this.handleOpen(row.id)}

handleOpen = (rowId) => {
     this.setState({
       [`setOpen-${rowId}`]: true
     })

---

但是，使用这种方法，如果我有上千行，我需要在范围中有上千个唯一值，可以吗？对我来说不太好是的，这很好，因为你不能用一个状态来控制多模态的行为。它们的行为相互独立，因此需要独立状态来控制它们。我有另一种解决方案，我可以将模态提取到其他类并从父组件控制打开状态吗？可以有一个单独的状态变量，但不是布尔变量，而是打开模态的rowid。然后，您可以根据状态是否与rowid匹配来设置模式的

open

属性。

onClick={() => this.handleOpen(row.id)}

handleOpen = (rowId) => {
     this.setState({
       [`setOpen-${rowId}`]: true
     })