Javascript 如何防止在React中同时调用多个循环输出？

我在tds表中循环，最下面一行的每个单元格都是一个业务描述，带有一个…阅读更多链接，打开一个模式。当我点击其中一个时，它不仅打开了该单元格的模式，而且还打开了所有单元格，奇怪的是，它从最后一个单元格开始。请参阅此视频以获取演示：

代码如下：

  state = {
    showModal: false
  };

  toggleModal = () => {
    this.setState({showModal: true});
    console.log('showModal: ', this.state.showModal);
  }

以及：

{assignedServiceProviders.map（（提供者，索引）=>{
返回(
{provider.description}asfasfdadfdas 46465464 adaddafafdadf 4654564564564 ADSADFDAFDFD
);
})}

---

当我点击一个链接时，它只需要打开相应的业务描述，而不需要打开任何其他的！有人知道如何防止这种行为吗

问题是，当您在分配的ServiceProviders上循环时，您正在创建多个模态实例。我认为您不需要多个实例，因为一次只打开一个实例

将模态状态设置为showModal时。实际上，您正在为生成的模态的所有实例设置状态。因此，您最终会打开多个模态。 理想情况下，您应该只有一个模式，并将数据传递给您的模式

您可以这样做：

首先，将模态移出循环，使其只有一个实例

将数据传递给：

 <a>onClick={() => this.toggleModal(provider.description)} key={index}>Read more</a> 

onClick={（）=>this.toggleModal（provider.description）}key={index}>阅读更多信息

最后，在toggleModal函数中，首先设置描述，然后打开modal

这样，所有ReadMore链接都将调用相同的模式实例。但描述不同。设置描述后，可以使用已存在的showModal状态重新渲染组件

下面是一个小例子：

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
showModal：错，
说明：“”
}
this.list=[{description:'desc1'}，{description:'desc2'}]；
}
onAnchorClick（{description}，事件）{
this.setState（{description，showmodel:true}）；
}
render（）{
返回(
{this.list.map（（obj，idx）=>
阅读更多
)}
描述：{this.state.Description}
)
}
}
window.onload=（）=>{
ReactDOM.render（，document.getElementById（“app”）；
}

---

每个模式可能都有一个showModal状态，或者它们是showModal对象上的键。

 <a>onClick={() => this.toggleModal(provider.description)} key={index}>Read more</a>