Javascript 引导模式组件未动态工作

我在使用React引导，我在使用javascript的map函数在管理员之间循环，当我在他们之间循环时，模式之外的所有值都会显示admins数组中的正确值，但在模式内部，它每次只显示数组中的一个标准对象。该组件的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"}]

{admins.length>0
？管理员地图（（i）=>(
{i.name}{i.id}

{i.email}
{i.role}

编辑
{4==i.id(
""
) : (
删除{i.id}
)}
删除帐户{i.id}//每次循环运行时，模式中仅显示id 1
是否确实要删除此团队帐户：{“”}
{i.name}？
接近
handledelete（i.id）}
>
删除
))
: ""}

---

我不知道为什么会发生这种情况，你能帮我吗？你在循环中创建模态（在本例中为3），这不是解决这个问题的最佳实践。您希望每个模式都有正确的道具，具体取决于数组的项，但是代码如何知道要显示哪个模式呢

您的

应该在循环之外。存储一个变量，以了解在打开模式时显示哪个管理员。（它可以是数组中的索引，也可以向管理员添加一个

selected

boolean）

当您触发

handleShow

时，也要设置此变量（完成后不要忘记将其取消设置，以防止副作用）

您还应该使用

===

而不是

==

，除非它是真正想要的（请参阅）

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

constmycomponent=（）=>{
const[adminSelected，setAdminSelected]=useState（-1）；
返回(
{admins.length>0
？管理员地图（（i，idx）=>(

{i.name}{i.id}

{i.email}
{i.role}

编辑
{4===i.id(
''
) : (
{
setAdminSelected（idx）；
handleShow（）；}}>
删除{i.id}
)}
))
: ''}
{
选择了setAdmin（-1）；
handleClose（）；}}>
删除帐户{i.id}//仅显示id 1
每次循环运行时都以模式显示
是否确实要删除此团队帐户：{i.name}？
接近
handledelete（i.id）}>
删除
);
};

---

请注意，我在映射中添加了

idx

变量，以了解单击了哪个管理员（-1表示无），我正在使用

handleShow

方法对其进行设置。

我不确定这里有什么问题<代码>内部模式当然只显示id为4的用户，因为您编写了

4==i.id

。你能重新表述一下，这样我们才能更好地理解，从而更好地帮助你吗？编辑：我的错，我的速度很慢实际上每次循环运行时它只显示数组中的第一个对象（admins），但在模式之外，循环运行正常，而不是id 4。我刚刚编辑了我的问题。

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

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>
  );
};