У меня есть объект под названием «Посох». Затем персонал отображается на карту, чтобы показать всех сотрудников-пользователей и отобразить список. Мне нужно каким-то образом получить имя персонала, который я хочу деактивировать, и показать его в модальном окне. Код:

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 ограничивает количество отрисовок, чтобы предотвратить бесконечный цикл.». Вот несколько скриншотов пользовательского интерфейса:

Список пользователей, которые я получил при отображении объекта персонала

Модальное окно, в котором я должен показывать имена

Как я мог это сделать? Я совершенно запуталась. Спасибо!

1
Florencia Vilchez Acosta 10 Окт 2020 в 01:03

1 ответ

Лучший ответ

Я бы начал с ложного значения состояния open.

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

Преобразуйте обработчики открытия / закрытия в пользовательский объект.

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

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

Передайте соответствующий объект пользователя при вызове handleOpen. ( Обратите внимание, что я написал открытый обработчик как каррированную функцию )

{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);. Просто измените все ссылки соответственно.

0
Drew Reese 9 Окт 2020 в 22:36