Блог

Главная - Вопросы по программированию - Использование React hook для запуска метода Mobx перед начальной визуализацией компонента

Использование React hook для запуска метода Mobx перед начальной визуализацией компонента

#reactjs #mobx #react-hooks

#reactjs #mobx #реагирующие перехваты

Вопрос:

Как следует из названия, у меня есть мое состояние внутри хранилища Mobx. У меня есть асинхронный метод (action), который извлекает данные и сохраняет их в свойстве внутри хранилища, откуда я получу к ним доступ в необходимом компоненте.

Проблема в том, что в настоящее время свойство не определено при начальной визуализации компонента, что приводит к ошибке в компоненте.

Как мне использовать useEffect() , чтобы он запускал асинхронный метод один и только один раз — и перед начальной визуализацией компонента, гарантируя, что состояние будет доступно для return() ? Что-то вроде этого:

 const Workflow = () => {
    const store = useContext(WorkflowContext)

    useEffect(async () => {
        await store.getWorkflow()
    }, [])
...

Комментарии:

1. Не записывайте компонент таким образом, чтобы это привело к ошибке undefined . ... Это важно.

2. У меня есть асинхронный маршрутизатор с резервным компонентом ожидания, действующим как «индикатор загрузки». У маршрутизатора есть маршрут для компонента Workflow. Я надеялся найти способ избежать двойной реализации логики загрузки пользовательского интерфейса.

3. Тогда у вас проблема XY. Невозможно приостановить инициализацию компонента, с перехватом или без него. getWorkflow возможно, необходимо вызвать на более высоком уровне. Рассмотрите возможность повторного ответа на вопрос со всеми задействованными соответствующими частями, включая асинхронный маршрутизатор.

Ответ №1:

Вы можете проверить, есть ли свойство в хранилище undefined , и вернуться null из компонента, если это так.

Пример

 const Workflow = () => {
  const store = useContext(WorkflowContext);

  useEffect(() => {
    store.getWorkflow();
  }, []);

  if (store.someProperty === undefined) {
    return null;
  }
  return <div>{store.someProperty}</div>;
};