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 中，这样它就不会在每次渲染时重新定义。

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

1 个答案: