async / await в реагирующем функциональном компоненте - PullRequest
Новая
       9

async / await в реагирующем функциональном компоненте

1 голос
/ 19 марта 2020

Я делаю что-то вроде следующего

({ ссылка }) 

 const LowerCard = (props) => {

   let { review_meta, step } = props
   const [component, setComponent] = useState('');
   const {state, editDispatch} = useContext(ReviewMetaEditCardDispatch);

   useEffect(() => {

     // https://stackoverflow.com/a/57847874/433570

     const setDynamicComponent = async () => {
       let DynamicComponent
       switch(state.step) {
       case 'title':
         DynamicComponent = await import('review/react/components/review-meta-edit-card/step/title')
         break
       }

       if (DynamicComponent) {
         setComponent(DynamicComponent.default)
       }
     }

     setDynamicComponent()
   }, []);


   if (!component) {
     return null
   }

   return (
     <View>
       <component/>
     </View>
   )
   }

Приведенный выше код работает, но когда я удаляю [] в вызов useEffect, это приводит к index.js:1 Warning: Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. You can only call Hooks at the top level of your React function.

Я предполагаю, что жалуется, что вы не должны вызывать setComponent (что является ловушкой) внутри useEffect.

Как мне преодолеть это?

Ответы [ 2 ]

2 голосов
/ 19 марта 2020

Вы не должны использовать функцию asyn c непосредственно внутри useEffect.

вот мое решение, посмотрите, работает ли оно 



const LowerCard = props => {
  let {review_meta, step} = props;
  const [component, setComponent] = useState('');
  const {state, editDispatch} = useContext(ReviewMetaEditCardDispatch);

  const setDynamicComponent = useCallback(async () => {
    let DynamicComponent;
    switch (state.step) {
      case 'title':
        DynamicComponent = await import('review/react/components/review-meta-edit-card/step/title');
        break;
    }

    if (DynamicComponent) {
      setComponent(DynamicComponent.default);
    }
  }, [state]);

  useEffect(() => {
    // https://stackoverflow.com/a/57847874/433570
    setDynamicComponent();
  }, [setDynamicComponent]);

  if (!component) {
    return null;
  }

  return (
    <View>
      <component />
    </View>
  );
};
1 голос
/ 19 марта 2020

Ваш динамический c компонент использует перехватчики, и если вы вызываете importedComponent.default, React выдаст ошибку и из-за ошибки использования перехватчиков внутри useEffect.

Вместо этого загрузите компонент и вызовите .default когда вы его визуализируете.

Я также добавил state.step в useEffect массив зависимостей, чтобы убедиться, что эффект запускается повторно, если state.step изменяется так, как если бы при первоначальной визуализации state.step не было title компонент никогда не будет отображаться, поскольку вы указали пустой массив зависимостей 

useEffect(() => {
  // same as before
  // ...
  if (DynamicComponent) {
    setComponent(DynamicComponent);
  }
}, [state.step])

if (!component) {
  return null;
}

return (
  <View>
    <component.default />
  </View>
)
...