时间戳

首页 > 解决方案 > 动态显示模态信息

javascript - 动态显示模态信息

问题描述

我有一个名为“员工”的对象。然后将人员映射以显示所有人员用户并呈现列表。我需要以某种方式获取我想要停用的员工的姓名，并以模式显示。编码：

const [staff, setStaff] = useState([]);

const handleOpen = () => {
  setOpen(true);
};

const handleClose = () => {
  setOpen(false);
};

const getStaff = async () => {
  try {
    const r = await apiClient.get(
      endpoints.businessUsersDemographics(idBusiness)
    );
    if (r.data) {
      const rawUsers = r.data.filter((d) => d.ic_active === true);
      const staff = rawUsers.filter(
        (u) => u.cd_user_type === userType["staff"]`enter code here`
      );

      setStaff(staff);
    }
  } catch (err) {
    console.log(err);
  }
};

return (
  <>
    {staff.length > 0 &&
      staff.map((u) => (
        <UserContainer key={u.id_user}>
          <UserName>
            {u.ds_firstname} {u.ds_lastname}
          </UserName>
          <UserInfo>{u.ds_mail}</UserInfo>
          <UserInfo>{u.ds_title}</UserInfo>
          <EditIcon
            onClick={() => handleEditUser(u)}
            className={classes.icon}
          />
          <ClearIcon
            className={`${classes.icon} ${classes.delete}`}
            onClick={handleOpen}
          />
        </UserContainer>
      ))}
    <Modal
      aria-labelledby="transition-modal-title"
      aria-describedby="transition-modal-description"
      className={classes.modal}
      open={open}
      onClose={handleClose}
      closeAfterTransition
      BackdropComponent={Backdrop}
      BackdropProps={{
        timeout: 500,
      }}
    >
      <Fade in={open}>
        <div className={classes.continueModal}>
          <p>You’re deactivating the following user from the business.</p>
          <UserName>No idea how to show the staff's name</UserName>
          <p>Would you like to continue?</p>
          <Button
            variant="contained"
            color="primary"
            type="submit"
            style={{
              width: "10rem",
              marginTop: theme.spacing(3),
            }}
          >
            Confirm
          </Button>
          <Button
            variant="contained"
            color="primary"
            type="submit"
            style={{
              width: "10rem",
              marginTop: theme.spacing(3),
            }}
          >
            Cancel
          </Button>
        </div>
      </Fade>
    </Modal>
  </>
);

我不确定如何呈现要停用的员工的姓名。我尝试这样做：使用 React js Modal 的动态内容，但出现“错误：重新渲染过多。React 限制渲染次数以防止无限循环。”。以下是部分 UI 截图：

我从映射人员对象中获得的用户列表

我应该显示名称的模式

我怎么能这样做？我完全糊涂了。谢谢！

标签： javascriptreactjsreact-hooks

解决方案

我会从一个虚假的open状态值开始。

const [open, setOpen] = useState(null);

转换您的打开/关闭处理程序以获取用户对象。

const handleOpen = (user) => () => {
  setOpen(user);
};

const handleClose = () => {
  setOpen(null);
};

调用时传递适当的用户对象handleOpen。（请注意，我已将 open 处理程序编写为 curried 函数）

{staff.length > 0 &&
  staff.map((u) => (
    <UserContainer key={u.id_user}>
      ...
      <ClearIcon
        ...
        onClick={handleOpen(u)} // <-- pass user object
      />
    </UserContainer>
  ))}

将open状态值强制为布尔值并访问保存的用户对象以显示名称。

<Modal
  ...
  open={!!open}
  ...
>
  <Fade in={!!open}>
    <div className={classes.continueModal}>
      ...
      <UserName>
        {open.ds_firstname} {open.ds_lastname} // <-- access the user from open state
      </UserName>
      <p>Would you like to continue?</p>
      ...
    </div>
  </Fade>
</Modal>

此时，变量名open并不能真正表达它所代表的值。我建议提供更多信息，例如const [selectedUser, setSelectedUser] = useState(null);. 只需相应地更改所有引用。

推荐阅读