React Bootstrap：模型内的映射数据不在模态中显示动态数据

Question

我有一个反应 bootstrap 模态，我在其中映射我的数据，但问题是当我单击模态时，所有模态都显示相同的数据，它显然是所有模态中数组的最后一项。我想动态生成模态并为不同的模态显示不同的数据。这是一些相关的代码：


  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

          {availableTeacher ? (
            availableTeacher.teachers.length > 0 ? (
              availableTeacher.teachers.map((data, i) => ( 
                      <Button variant="primary" onClick={handleShow}>
                       Test Modal
                      </Button>

                      <Modal show={show} onHide={handleClose}>
                        <Modal.Header closeButton>
                          <Modal.Title>{data.teacher.name}</Modal.Title>
                        </Modal.Header>
                        <Modal.Body>{data.teacher.name}</Modal.Body>
                        <Modal.Footer>
                          <Button variant="secondary" onClick={handleClose}>
                            Close
                          </Button>
                          <Button variant="primary" onClick={handleClose}>
                            Save Changes
                          </Button>
                        </Modal.Footer>
                      </Modal>
    ```

Answer 1

问题是，您正在循环中创建多个模态框，并且所有模态框都使用同一个处理程序，其中状态是一个 boolean 变量。因此，当您单击按钮时，它会一个接一个地显示所有模态，最后一个将显示在最上面，这就是为什么您总是看到相同的最后一个模态。

有两种方法可以解决这个问题：

将模态打开状态作为数组进行管理，每次点击时传递索引并使用该索引仅打开特定模态。
创建一个单一模式并在打开它时将整个数据对象传递给它，以便它显示传递的数据。通过这种方式，只需要一个模式，它将显示动态传递的数据。（推荐）

React Bootstrap：模型内的映射数据不在模态中显示动态数据

React Bootstrap: mapping data inside model doesnt show dynamic data in modal

javascript

bootstrap-modal

reactjs

react-bootstrap