Question

全部！我是 React 的新手。目前，我遇到了一个与 react hooks 相关的问题。问题如下图：设计一个自定义钩子来封装可以执行副作用操作（例如AJAX请求）的useEffect，设计的自定义钩子可以跳过第一个操作并从第二次开始执行副作用操作。

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

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

Answer 1

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

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

   
}

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

1 个答案: