Bootstrap React 模态组件不能动态工作

Question

I am using React Bootstrap, I am using map function of javascript to loop through admins, when i loop through them all values outside the modal display the correct values from the admins array, but inside the modal it shows only one standard object from the array每次。 该组件的 id 在模态外部和模态内部是不同的，内部的模态仅显示每个组件中 id 为 1 的用户或每次单击模态时

admins = [ {id: 5, email: "angelinsneha@gmail.com", name: "angelin", role: "admin"},
{id: 4, email: "angelinsneha14@gmail.com", name: "angu", role: "admin"},
{id: 1, email: "angelin@gmail.com", name: "aanjuu", role: "admin"}]

<div className="rgtss pb-5">
        {admins.length > 0
          ? admins.map((i) => (
              <div className="bdr">
                <div>
                  <p>{i.name} {i.id}</p>
                  <span>{i.email}</span>
                </div>
                <div className="mt-3">
                  <p>{i.role}</p>
                </div>
                <div>
                  <DropdownButton
                    id="dropdown-basic-button"
                    variant="dark"
                    title=""
                    size="sm"
                  >
                    <Dropdown.Item href={id == i.id ? "/profile" : ""}>
                      Edit
                    </Dropdown.Item>
                    {4 == i.id ? (
                      ""
                    ) : (
                      <Dropdown.Item onClick={handleShow}>Delete  {i.id}</Dropdown.Item>
                    )}
                  </DropdownButton>
                  <Modal show={show} onHide={handleClose}>
                    <Modal.Header closeButton>
                      <Modal.Title>Delete Account  {i.id}</Modal.Title> // only id 1 is displayed in modal, everytime the loop runs 
                    </Modal.Header>
                    <Modal.Body>
                      Are you sure you want to delete this team account:{" "}
                      <b>{i.name}</b>?
                    </Modal.Body>
                    <Modal.Footer>
                      <Button variant="secondary" onClick={handleClose}>
                        Close
                      </Button>
                      <Button
                        variant="danger"
                        onClick={() => handledelete(i.id)}
                      >
                        Delete
                      </Button>
                    </Modal.Footer>
                  </Modal>
                </div>
              </div>
            ))
          : ""}
</div>

我不知道为什么会这样，你能帮帮我吗？

Answer 1

您正在循环中创建模态（在本例中为 3），这不是解决这个问题的最佳实践。 您希望每个模态都有正确的道具，具体取决于数组的项目，但是代码如何知道要显示哪个模态？

您的<Modal>应该在循环之外。 存储一个变量以了解在调出模式时要显示哪个管理员。 （它可以是数组中的索引，或者将selected的 boolean 添加到管理员）。

当您触发您的handleShow时，也设置此变量（完成后不要忘记取消设置，以防止副作用）

您还应该使用===而不是==除非它真的是有意的（有关更多信息，请参阅此 SO 帖子）

编辑：在代码中，它应该看起来像这样（不要复制/粘贴，它未经测试）

const MyComponent = () => {
  
  const [adminSelected, setAdminSelected] = useState(-1);
  
  return (
    <div className="rgtss pb-5">
      {admins.length > 0
        ? admins.map((i, idx) => (
            <div className="bdr">
              <div>
                <p>
                  {i.name} {i.id}
                </p>
                <span>{i.email}</span>
              </div>
              <div className="mt-3">
                <p>{i.role}</p>
              </div>
              <div>
                <DropdownButton
                  id="dropdown-basic-button"
                  variant="dark"
                  title=""
                  size="sm"
                >
                  <Dropdown.Item href={id === i.id ? '/profile' : ''}>
                    Edit
                  </Dropdown.Item>
                  {4 === i.id ? (
                    ''
                  ) : (
                    <Dropdown.Item onClick={() => {
                      setAdminSelected(idx);
                      handleShow();}}>
                      Delete {i.id}
                    </Dropdown.Item>
                  )}
                </DropdownButton>
              </div>
            </div>
          ))
        : ''}
      <Modal show={show} onHide={() => {
        setAdminSelected(-1);
        handleClose();}}>
        <Modal.Header closeButton>
          <Modal.Title>Delete Account {i.id}</Modal.Title> // only id 1 is
          displayed in modal, everytime the loop runs
        </Modal.Header>
        <Modal.Body>
          Are you sure you want to delete this team account: <b>{i.name}</b>?
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="danger" onClick={() => handledelete(i.id)}>
            Delete
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
};

请注意，我在映射中添加了idx变量以了解单击了哪个管理员（-1 表示没有），并且我将它与handleShow方法一起设置。