Использование React-хука для запуска метода Mobx перед начальным рендерингом компонента - PullRequest
Новая
       10

Использование React-хука для запуска метода Mobx перед начальным рендерингом компонента

0 голосов
/ 17 апреля 2019

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

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

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

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

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

1 Ответ

1 голос
/ 17 апреля 2019

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

Пример 

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

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

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