React - 使用多個 react-bootstrap 模式顯示數據的正確方法

Question

為了學習React.js ，我使用react-bootstrap創建了一個簡單的應用程序來顯示所有員工的個人數據。 但是Modal有問題，我還沒有找到解決辦法。 問題是為所有Modal顯示的數據是最后一個員工數據，在本例中是employee-03 。

看看這里的代碼（不是完整代碼）， https://codesandbox.io/s/peaceful-wave-cjdo3

根據這篇文章， React-Bootstrap Multiple Modal我懷疑似乎所有Modal都使用相同的 ID。 我感到困惑的是，如果以后要從 JSON 文件中檢索員工數據，如何為每個Modal設置不同的 ID？

謝謝。

問候，埃羅爾。

Answer 1

您正在使用相同的 state 來切換所有模態。 如果您使用 React 的開發人員工具，您會看到每個模態都有其對應的數據。 我將在 state 或帶有 id 的字符串中創建一個布爾數組：

  const [modalId, setModalId] = React.useState("");
  const handleClose = () => setModalId("");

  return (
    <Row className="App">
      {data.map((pax, i) => (
        <Col xs={12} md={4} key={pax.Uniquename}>
          <Card>
            <Card.Body>
              <Card.Title as="h4">{pax.Uniquename}</Card.Title>
              <Button type="button" onClick={() => setModalId(`modal${i}`)}>
                Open Modal
              </Button>
            </Card.Body>
            <Modal
              show={modalId === `modal${i}`}
              onHide={handleClose}
              aria-labelledby={`${pax.Uniquename}ModalLabel`}
              centered
            >
              <Modal.Header id={`${pax.Uniquename}ModalLabel`} closeButton>
                {pax.Uniquename}
              </Modal.Header>
              <Modal.Body>Full Name: {pax.Name}</Modal.Body>
            </Modal>
          </Card>
        </Col>
      ))}
    </Row>
  );

PS：這只是一個例子，你可以重新考慮你的系統。