Блог

У меня есть модальный режим начальной загрузки react, в котором я сопоставляю свои данные, но проблема в том, что когда я нажимаю на модалы, все модалы отображают одни и те же данные, по-видимому, это последний элемент массива во всех модалах. Я хочу динамически генерировать модальные и показывать разные данные для разных модальных. Вот некоторый соответствующий фрагмент кода:

 
  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>
    ```
 

Проблема в том, что вы создаете несколько модалов в цикле, и все они используют один и тот же обработчик, в котором состояние является boolean переменной. Поэтому, когда вы нажимаете на кнопку, она будет отображать все модалы один за другим, и последний будет сверху, поэтому вы всегда видите один и тот же последний модал.

Есть два способа решения этой проблемы:

1. Управляйте состоянием открытия модала как массивом и при каждом нажатии передавайте индекс и используйте этот индекс только для открытия этого конкретного модального.
2. Создайте один модальный объект и передайте ему весь объект данных при его открытии, чтобы он отображал переданные данные. Таким образом, требуется только один модальный, и он будет отображать динамически передаваемые данные. (Рекомендуется)