Reactjs react功能组件中的异步/等待

我正在做下面的事情

上面的代码可以工作，但是当我在useffect调用中删除[]时，它会导致 js:1警告：不要在useffect…、usemo…、或其他内置钩子中调用钩子。您只能在React函数的顶层调用钩子

我猜这是在抱怨你不应该调用setComponent，它是useffect中的一个钩子

---

如何克服这个问题？

您不应该在useEffect中直接使用异步函数

这是我的解决方案，看看是否有效

const LowerCard=props=>{ 让{review_meta，step}=props； const[component，setComponent]=useState； const{state，editDispatch}=useContextReviewMetaEditCardDispatch； 常量setDynamicComponent=useCallbackasync=>{ 让动态组件； 开关状态。步骤{ “标题”一案： DynamicComponent=等待导入“审阅/反应/组件/审阅元编辑卡/步骤/标题”； 打破 } 如果动态组件{ setComponentDynamicComponent.default； } }，[国家]； useEffect=>{ // https://stackoverflow.com/a/57847874/433570 setDynamicComponent； }，[setDynamicComponent]； 如果！组件{ 返回null； } 回来 ; };

---

您不应该在useEffect中直接使用异步函数

这是我的解决方案，看看是否有效

const LowerCard=props=>{ 让{review_meta，step}=props； const[component，setComponent]=useState； const{state，editDispatch}=useContextReviewMetaEditCardDispatch； 常量setDynamicComponent=useCallbackasync=>{ 让动态组件； 开关状态。步骤{ “标题”一案： DynamicComponent=等待导入“审阅/反应/组件/审阅元编辑卡/步骤/标题”； 打破 } 如果动态组件{ setComponentDynamicComponent.default； } }，[国家]； useEffect=>{ // https://stackoverflow.com/a/57847874/433570 setDynamicComponent； }，[setDynamicComponent]； 如果！组件{ 返回null； } 回来 ; };

---

您的动态组件正在使用钩子，如果调用importedComponent.default React，将在useEffect内抛出使用钩子的错误

相反，加载组件并在渲染时调用.default

我还将state.step添加到useEffect dependencies数组中，以确保在state.step更改时重新运行效果，就像在初始渲染状态时一样。step不是标题组件将永远不会渲染，因为您提供了一个空的dependencies数组

useEffect=>{ //和以前一样 // ... 如果动态组件{ setComponentDynamicComponent； } }，[说明步骤] 如果组成部分{ 返回null； } 回来

---

您的动态组件正在使用钩子，如果调用importedComponent.default React，将在useEffect内抛出使用钩子的错误

相反，加载组件并在渲染时调用.default

我还将state.step添加到useEffect dependencies数组中，以确保在state.step更改时重新运行效果，就像在初始渲染状态时一样。step不是标题组件将永远不会渲染，因为您提供了一个空的dependencies数组

useEffect=>{ //和以前一样 // ... 如果动态组件{ setComponentDynamicComponent； } }，[说明步骤] 如果组成部分{ 返回null； } 回来

---

哦，那么我如何为componentDidUpdate等效项运行上述代码呢？我尝试添加[state.step]，这是导致我更改组件的原因，但它仍然会生成相同的错误效果中是否有其他条件？当你想重新运行它时？哦，那么我如何运行上面的componentDidUpdate等效代码？我尝试添加[state.step]，这是导致我更改组件的原因，但它仍然会生成相同的错误效果中还有其他条件吗？如果要重新运行它，请尝试{component}，而不是JSX中的自定义组件名称应为uppercasedtry{component}，而不是JSX中的自定义组件名称应为uppercasedDynamicComponent。默认值不调用它，而只是读取引用。在useEffect内部或渲染中附加.default不会导致difference@Max如果在useEffect中调用DynamicComponent.default，它实际上会产生不同，因为它返回默认导出的结果时，useEffect React将出错component@Max删除注释行并查看差异，一定要评论另一个，这确实是因为*。default@AsafAviv我尝试了您的示例，它确实适用于setComponentDynamicComponent。但是，我仍然不清楚为什么会发生这种情况，因为在这里setComponentDynamicComponent.default我们没有调用函数-调用它将是setComponentDynamicComponent.default。当我有更多的timeDynamicComponent时，我会做一些额外的调查。默认值不是调用它，而是读取引用。附加。默认值在useEffect内部或在render make中

---

没有difference@Max如果在useEffect中调用DynamicComponent.default，它实际上会产生不同，因为它返回默认导出的结果时，useEffect React将出错component@Max删除注释行并查看差异，一定要评论另一个，这确实是因为*。default@AsafAviv我尝试了您的示例，它确实适用于setComponentDynamicComponent。但是，我仍然不清楚为什么会发生这种情况，因为在这里setComponentDynamicComponent.default我们没有调用函数-调用它将是setComponentDynamicComponent.default。当我有更多的时间时，我会做一些额外的调查

 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>
   )
   }