javascript - 我的 onClick() 出现问题。更新数组中错误索引的数据？

Question

您好，我有一个带有标题“患者信息”和位置的表格。在标题位置下，每行有 5 个按钮，按钮有 patentLocationSelect() onClick。第 5 个按钮与其他按钮不同，因为单击弹出窗口时该按钮会显示更多按钮。在弹出窗口上还有更多按钮，其中包含 patentLocationSelect() onClick。

前 4 个按钮的 onClick 按预期工作。 patentLocationSelect() 接收被单击的 locationButton 的 id 和患者索引，然后在状态下更新数组中正确患者的位置。

问题

第 5 个按钮显示更多按钮，但是 patentLocationSelect() 始终选择数组中的最后一个患者。在这种情况下，它总是有男子气概，并且只更新他的位置。我不明白为什么。

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

   patientLocationSelect = (e, data, index) => {

        const { id } = e.target;

        this.setState({
            patientInfo: this.state.patientInfo.map((patient, i) => {
                if (i=== index){
                    return {...patient, locationInfo: id};
                }
                return patient;
            })
        });
    }

  const popoverButtons = [
        "Dinning Room",
        "Garden",
        "Shower",
        "Activity Room",
        "Toilet", 
    ];


 locationButtons : ['Bed', 'Corridor', 'TV', 'Lounge'],


<tbody>
            {patientInfo.map((patient, index) =>
                <tr>
                    <td>{patient.room}</td>
                    <td>{patient.name}</td>
                    <td className="location-btns">
                        {locationButtons.map((location, i) =>
                            <Button
                                 key={i}
                                onClick={(e) => patientLocationSelect(e, patient, index)}
                                id={location}
                            >
                                {location}

                            </Button>
                        )}

                        <Button id="Other" onClick={showPopOver}>Other</Button>

                        <Overlay
                            show={show}
                            target={target}
                            placement="left"
                         >

                            <Popover id="popover-contained">

                                {
                                    popoverButtons.map((item, i)=> 
                                        <Button
                                            key={i}
                                            onClick={(e) => patientLocationSelect(e, patient, index)}
                                            id={item}
                                        >
                                            {item}
                                        </Button>
                                    )
                                }
                            </Popover>
                        </Overlay>

                    </td>

Answer 1

当您单击“其他”按钮时，就会呈现叠加组件，对吗？这意味着患者信息已完整呈现。这意味着病人信息上的 map 功能已经完成。因此它总是返回最后的患者信息。

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

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

然后单击 Popover 按钮，执行以下操作:

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

希望这能解决您的问题