Bootstrap React 模态组件无法动态工作

Question

我正在使用 React Bootstrap，我正在使用 javascript 的映射函数来遍历管理员，当我遍历它们时，模态之外的所有值都会显示来自管理员数组的正确值，但在模式内部，它每次只显示数组中的一个标准对象。该组件的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 布尔值）。

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

你也应该使用 === 而不是 == 除非它确实是有意的（参见 this SO post for more info）

编辑：在代码中，它应该是这样的（不要 copy/paste，它未经测试）

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 表示 none），并且我将它与 handleShow 一起设置方法。

Bootstrap React 模态组件无法动态工作

Bootstrap React Modal Component not working dynamically

javascript

bootstrap-modal

reactjs