Question

我一直在努力使用带有useEffect的自定义钩子，但是有时它运行了不止一次，可能是2或3次，但是我确实没有开始的方向，我知道自定义钩子每次都可能调用重新渲染了该组件，但是我在钩子中进行了一个标志检查，并使用了一个useEffect并具有一个依赖项列表，为什么它仍然一次又一次地进行相同的调用？

// custom hook
const useCustomFetch = (startLoad, user) => {
   const hadError = useSelector(state => return state.hadError);
   useEffect(() => {
      // define the async function inside useEffect
      const asyncFetch = async() => {
         const data = await loadingFromApi(user.id, user.emailAddress);
         dispatch(loadwebsite(data)); 
      }

      console.log('useCustomFetch startLoad', startLoad); //I can see two true here
      if(startLoad) {
         asyncFetch();
         dispatch(loadComplete());
      }
   }, [startLoading, dispatch, hadError, loadingFromApi]);
}

// main component
const main = () => {
   const [selectionChanged, setSelectionChanged] = useState(false);
   const [loadData, setLoadData] = useState(false);

   useEffect(() => {
     if(selectionChanged) {
       setLoadData(true); // to trigger custom hook
       setSelectionChanged(false) // to avoid useEffect execute again
     }
   }, [selectionChanged]);
  
   const loadDone = useCustomFetch(loadData, user);

   const selectChange = () => {
     setSelectionChanged(true);
   }
}

我的想法是用户切换选择下拉列表，将我的本地状态selectionChanged设置为true，这将触发我的useEffect，而useEffect将我的本地状态loadData设置为true，这将触发我的自定义挂钩。由于我将标志传递到了我的自定义挂钩的依赖项列表中，因此它只能执行一次。

但是我可以看到我的网络有2个相同的请求，有时是3个相同的请求，我想知道是否是因为我的useEffect中有2个setState，但是我必须重置条件标志并且它不会将加载数据设置为再说一遍，那我为什么以及如何诊断这种问题？

自定义钩子执行了多次

0 个答案: