Javascript 我的onClick（）有问题。是否更新数组中错误索引的数据？

嗨，我有一张桌子，上面有标题、信息和位置。在标题位置下，每行有5个按钮，按钮有

patientLocationSelect（）

onClick

。第五个按钮与其他按钮不同，因为当单击popover时，该按钮会显示更多的按钮。popover上还有一个按钮，上面有

patientLocationSelect（）

onClick

前4个按钮上的onClick按预期工作。

patientLocationSelect（）

获取单击的locationButton的id和患者索引，然后在状态上更新数组中正确患者的位置

问题

第5个按钮显示更多按钮，但是

patientLocationSelect（）

始终拾取阵列中的最后一个患者。在这种情况下，它总是有男子气概，只更新他的位置。我不明白为什么

 patientInfo: [
                {room: 1, name: 'John',  location: ''},
                {room: 2, name: 'Shawn', location: ''},
                {room: 3, name: 'Brave', location: ''},
                {room: 4, name: 'Macho', location: ''},
              ]

常量弹出按钮=[
“餐厅”，
“花园”，
“淋浴”，
“活动室”，
“厕所”，
];
位置按钮：[“床”、“走廊”、“电视”、“休息室”]，
{patientInfo.map（（患者，索引）=>
{病人室}
{患者名称}
{locationButtons.map（（位置，i）=>
患者位置选择（e，患者，索引）}
id={location}
>
{location}
)}
其他
{
popoverButtons.map（（项目，i）=>
患者位置选择（e，患者，索引）}
id={item}
>
{item}
)
}

---

当您单击“其他”按钮时，覆盖组件将被渲染，对吗？这意味着患者信息已完全渲染。这意味着patientInfo上的映射功能已完成。因此，它始终返回最后一个患者信息

要解决此问题，您可以按如下所示单击“其他”按钮以状态保存患者信息：

<Button
 id="Other"
 onClick={() => {
    this.setState({ activePatient: patient, activeIndex: index });
    showPopOver();
 }}
>
    Other
</Button>

onClick={(e) => patientLocationSelect(e, this.state.activePatient, this.state.activeIndex)}

---

希望这能解决您的问题

当您单击其他按钮时，覆盖组件被渲染，对吗？这意味着患者信息被完全渲染。这意味着patientInfo上的映射功能完成。因此它总是返回最后一个患者信息

要解决此问题，您可以按如下所示单击“其他”按钮以状态保存患者信息：

<Button
 id="Other"
 onClick={() => {
    this.setState({ activePatient: patient, activeIndex: index });
    showPopOver();
 }}
>
    Other
</Button>

onClick={(e) => patientLocationSelect(e, this.state.activePatient, this.state.activeIndex)}

---

希望这能解决您的问题

我已经做了更多的调试，似乎所有的弹出窗口都显示在顶部并堆叠在顶部。因此，当我单击其他按钮时，它是最后一个弹出窗口，因此它会更新最后一个患者。我需要弄清楚如何仅为每个患者单独打开弹出窗口您可以创建代码吗dbox/code pen演示问题我已经做了更多的调试，似乎所有的弹出窗口都显示在顶部并堆叠在顶部。因此，当我单击其他按钮时，它是最后一个弹出窗口，因此它更新最后一个患者的原因。我需要弄清楚如何仅为单个患者单独打开弹出窗口您可以创建代码沙盘吗用x/code笔演示问题