地图功能内的React Bootstrap模态消除背景并出现两次

Question

我正在使用地图函数来创建包含获取数据的列表。我想让一个单元格成为一个可点击的按钮，使模态与该数组内对象的“about”属性中的文本一起出现。我遇到三个问题：

1. 在模态外观上，模态的外部不会变暗（更暗），而是完全黑色。
2. 模态出现两次，一个在另一个下，文本的不同部分出现在每个窗口中
3. “about”属性根本不解析。对于“地图”函数生成的每个距离，我总是得到相同的文本。如果我将属性字符串放在函数之外，就不会发生这种情况

     <tbody>
                            {employees.map((employeeData: any, index: any) => (
                                <tr key={index} style={trDiv} ref={myRef}>
                                    <td>
                                        <img
                                            style={{ minWidth: '120px', maxWidth: '140px' }}
                                            src={employeeData.imageUrl}
                                            alt=""
                                            className="card-img-top img-thumbnail"
                                        />
                                    </td>
                                    <td>
                                        {employeeData.firstName}
                                        {index}
                                    </td>
                                    <td>{employeeData.lastName}</td>
                                    <td>{employeeData.adress}</td>
                                    <td>{employeeData.email}</td>
                                    <td>{employeeData.contactNumber}</td>
                                    <td>{employeeData.position}</td>
                                    <td>
                                        <Button variant="primary" onClick={showModal}>
                                            View
                                        </Button>
                                        <Modal show={isLoaded} onHide={hideModal}>
                                            <Modal.Header closeButton>
                                                <Modal.Title>Modal heading</Modal.Title>
                                            </Modal.Header>
                                            <Modal.Body>{employeeData.about}</Modal.Body>
                                            <Modal.Footer>
                                                <Button variant="secondary" onClick={hideModal}>
                                                    Close
                                                </Button>
                                                <Button variant="primary" onClick={hideModal}>
                                                    Save Changes
                                                </Button>
                                            </Modal.Footer>
                                        </Modal>
                                    </td>
                                    <td>{employeeData.manager_id}</td>
                                    <td>
                                        {new Date(employeeData.created_at).toLocaleDateString() +
                                            ' ' +
                                            new Date(employeeData.created_at).toLocaleTimeString()}
                                    </td>
                                    <td>
                                        {new Date(employeeData.updated_at).toLocaleDateString() +
                                            ' ' +
                                            new Date(employeeData.updated_at).toLocaleTimeString()}
                                    </td>
                                </tr>
                            ))}
                        </tbody>
</code>

Answer 1

由 ChatGpt 计算得出。 模态需要位于地图函数之外，我需要再创建一个 useState，并且每次单击打开模态的按钮时，setstate 都会将地图数组中的当前项目设置为需要在模态中显示的项目。 否则，如果您在其内部地图功能时单击模态，则列表中所有打开的模态按钮的状态都会设置为 true