从自定义钩子内部返回函数

Question

我有下面的自定义钩子；

export default function useFetch(url) {
    const [response, setResponse] = useState();
    useEffect(() => {
        const fetchresponse = async () => {
            // code to fetch response from api
        }
        fetchresponse();
    }, [url]);

    return [response];
}

虽然上述功能从我的功能组件开始就可以正常工作，但我想让它可重用并从我的主要组件中的其他位置（例如按钮单击）调用它们，即在按钮单击时点击 api。 因此，我想返回一个可执行函数，可以在单击按钮时调用它。

考虑到我的自定义钩子中有一个 useEffect ，我该怎么做？

Answer 1

只需在useEffect 挂钩之外定义函数即可。

那么它就会在范围内返回。

function useFetch(url) {
    const [response, setResponse] = useState();

    const fetchresponse = async () => {
        // code to fetch response from api
    }

    useEffect(() => {
        fetchresponse();
    }, [url]);

    return [response, fetchresponse];
}

可以选择将函数包装在 useCallback 中，这样它就不会在每次渲染时重新定义。