從自定義鈎子內部返回 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中，這樣它就不會在每次渲染時重新定義。