如何使自定义钩子返回一个函数，该函数使用另一个钩子

Question

所以我有一个自定义钩子，我想在另一个组件的多个地方使用它，比如一个函数，它接受参数 (Ei For useNavigate() from react-router-dom-v6 ，我们将它用作const navigate = useNavigate()然后navigate('./url/to/navigate')可以在多个地方使用）。

但是在自定义挂钩中，我想通过另一个自定义挂钩处理该参数值。 这是我尝试过的，但 React 不允许我在函数内部有这样的钩子：

//useCustomHook.js
function usePrevious(value) {
    const ref = useRef();
    useEffect(() => {
        ref.current = value;
    });
    return ref.current;
}
...
export default function useCustomHook() {
    function processingData(currentState){
        const previousState = usePrevious(currentState);    //React does not allow to have hook here
        return process(currentState, previousState);
    }
    return processingData;
}

//Component.js
...
const cusHook = useCustomHook();
...
useEffect(()=>{
   cusHook(state1)
},[])

useEffect(()=>{
   cusHook(state2)
},[temp])

有没有办法可以做到这一点？

Answer 1

不，您无法在纯 JavaScript 函数中使用钩子。 为什么不做这样的事情：

   export default function useCustomHook(currentState) {
        const previousState = usePrevious(currentState);
        const processingData = () => {
               return process(currentState, previousState);
        }
       return processingData;
   }