Question

我有一个使用useEffect的customHook，我希望它在useEffect完成后返回结果，但是，它总是在我的异步方法完成之前返回...

// customHook
const useLoadData = (startLoading, userId, hasError) => {
  const [loadDone, setLoadDone] = useState(false);
  const loadWebsite = async(userId) => {
     await apiService.call(...);
     console.log('service call is completed');
     dispatch(someAction);
  }

  useEffect(() => {
    // define async function inside useEffect
    const loadData = async () => {
       if (!hasError) {
          await loadWebsite();
       }
    }

    // call the above function based on flag
    if (startLoading) {
       await loadData();
       setLoadDone(true);
    } else {
      setLoadDone(false);
    }
  }, [startLoading]);

  return loadDone;
}

// main component
const mainComp = () => {
   const [startLoad, setStartLoad] = useState(true);
   const loadDone = useLoadData(startLoad, 1, false);
   useEffect(() => {
       console.log('in useEffect loadDone is: ', loadDone);
       if (loadDone) {
          // do something
          setStartLoad(false); //avoid load twice
       } else {
          // do something
       }
   }, [startLoad, loadDone]);
   useAnotherHook(loadDone); // this hook will use the result of my `useLoadData` hook as an execution flag and do something else, however, the `loadDone` always false as returning from my `useLoadData` hook
}

在我的useDataLoad挂钩中，它似乎不等待我的异步函数loadData完成，而是始终将loadDone设为false，即使我已经将await关键字loadData函数，然后是setLoadDone(true)，它始终始终返回false，这对我的实现有何影响，我又该如何通过customHook中的async方法返回正确的值？

Answer 1

嗯...虽然我不确定为什么将TestFunc<false>()放在我的异步方法中，而不是放在setLoadDone(true);中，但这似乎仍然有效。更新的代码：

useEffect

使用useEffect和异步来反应customHook

1 个答案: