使用自定义钩子通过AJAX请求封装useEffect

Question

全!我是个新手。目前，我遇到了一个与react挂钩相关的问题。问题说明如下:设计一个自定义钩子来封装useEffect，它可以执行副作用操作(如AJAX请求)，设计的自定义钩子可以跳过第一次操作，从第二次开始执行副作用操作。

这里我设计了一个钩子，但是它是不正确的。我知道钩子的关键是如何判断这是否是第一次调用自定义钩子。有人告诉我应该使用useRef来计算counter，但我不太确定如何用useRef来设计它。你们能帮我解决这个问题吗？

function useMyCoustomHook(func, dependencies){
    let counter = 1;
    useEffect(()=>{
       if(counter === 1){
         counter--;
       }else{
         func();
       }
    }, [dependencies])
}

Answer 1

我删除了依赖项，即使组件reRenders与您的let counter = 1;不同，您也应该使用记住其值的ref

function useMyCoustomHook(func, dependencies){
    let counter = useRef(0);
    useEffect(()=>{
       if(counter.current === 0){
         counter.current++;
       }else{
         func();
       }
    }, [dependencies])

   
}