Javascript React引导：模型内的映射数据在模式中不显示动态数据

我有一个react引导模式，我映射我的数据，但问题是当我点击modals时，所有modals显示相同的数据，它显然是所有modals中数组的最后一项。我想动态生成模态，并为不同的模态显示不同的数据。下面是一些相关的代码：

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

{AvailableTech(
AvailableTech.teachers.length是否大于0(
availableTeacher.teachers.map（（数据，i）=>）
测试模态
{data.teacher.name}
{data.teacher.name}
接近
保存更改
```

问题是，您正在循环下创建多个模态，并且所有模态都使用相同的处理程序，其中状态为

布尔变量。因此，当您单击按钮时，它将逐个显示所有模态，最后一个模态将位于顶部，这就是为什么您总是看到相同的最后一个模态

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

以数组形式管理模态打开状态，每次单击时传递索引并使用该索引仅打开特定模态
创建单个模式，并在打开时将整个数据对象传递给它，以便它将显示传递的数据。这样，只需要一个模式，它将显示动态传递的数据。（推荐）
它解决了我的问题谢谢，我用了第二种方法
          {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>
    ```