从自定义钩子内部返回 function

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。 因此，我想返回一个可执行的 function，它可以在点击按钮时调用。

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

Answer 1

只需在useEffect挂钩外定义 function 即可。

然后它将在 scope 中返回。

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

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

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

    return [response, fetchresponse];
}

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