Реагируйте на обновление модального метода Ant Design при изменении состояния - PullRequest
Новая
       41

Реагируйте на обновление модального метода Ant Design при изменении состояния

0 голосов
/ 30 сентября 2019

В настоящее время я выполняю миграцию на antd, и на определенном маршруте появляются модальные моды (например, / userid / info). Я могу добиться этого, если использую компонент antd Modal реагировать, но я бы хотел использовать предоставленные модальные методы, такие как Modal.confirm, Modal.info и Modal.error, поскольку они предлагают более приятный пользовательский интерфейс. прямо из коробки.

Я сталкиваюсь с несколькими проблемами, такими как рендеринг модала несколько раз (как сначала, так и после нажатия delete в случае удаления пользователя), и не могу изменить его из-за состояния(т.е. отображать панель загрузки, пока не поступят данные). Это то, что я пробовал, но он постоянно рендерит новые модалы, я пробовал что-то еще, но это никогда не менялось при отображении <Loader />, хотя isFetching было ложным. Я не уверен, что еще можно попробовать. 

const UserInfoFC: React.FC<Props> = (props) => {

  const user = props.user.id;

  const [isFetching, setIsFetching] = React.useState<boolean>(true);
  const [userInfo, setUserInfo] = React.useState<string>('');

  const modal = Modal.info({
    content: <Loader />,
    title: 'User Info',
  });

  const displayModal = () => {

    const renderInfo = (
      <React.Fragment>
        <p>display user.info</p>
      </React.Fragment>
    );

    const fetchInfo = async () => {
      try {
        user = // some api calls
        setUserInfo(user.info);
        modal.update({ content: renderInfo })
      } catch (error) {
        // todo
      }
      setIsFetching(false);
    };
    fetchInfo();
  };

  displayModal();

  return(<div />);
};

ссылка: https://ant.design/components/modal/#components-modal-demo-confirm

edit: вот повторение одной из проблем, с которыми я сталкиваюсь: https://codesandbox.io/embed/antd-reproduction-template-1jsy8

Ответы [ 2 ]

0 голосов
/ 01 октября 2019

Вместо перехода к /: id / info и маршрутизации к компоненту, который возвратил бы пустой div, но отображал бы модальное, я создал компонент displayInfo, который отображает кнопку и управляет модальным. Я избавился от попыток использовать для этого маршруты.

То, что у меня сейчас есть, похоже на документы

0 голосов
/ 01 октября 2019

Как уже упоминалось в моем комментарии, вы можете использовать хук useEffect с пустым массивом зависимостей для запуска функции один раз, когда компонент монтируется. Вы можете инициировать асинхронный вызов, подождать, пока он разрешит и сохранить данные в вашем состоянии, и запустить модал со вторым хуком, как только данные поступят.

Я сделал песочницу здесь

...