使用異步獲取反應鈎子

Question

我是 React 鈎子的新手，但我正在嘗試將useEffect與useCallback一起使用，但是React Hook "useList" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks React Hook "useList" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks錯誤中調用 React Hooks。

該文件包含 makeRequest：

function useConnections = () => {
    const makeRequest = React.useCallback(async (props) => {
        // Determine base url, determine headers here
        const response = fetch(url, options);

        return response;
    }

    return { makeRequest };
}

這個文件是我的useListProvider ：

function useListProvider = () => {
    const { makeRequest } = useConnections();

    const useList = React.useCallback(async (props) => {
        // makerequest is just a wrapper for fetch with a bunch of needed headers.
        const response = await makeRequest(props);

        return { body: response.body };
    }

    return { useList };
}

這是渲染的頁面：

function MainPage() {
    const [isBusy, setIsBusy] = React.useStore(false);
    const { useList } = useListProvider();

    React.useEffect(() => {
        if (!isBusy) { useList(); setIsBusy(false); } // ERROR HERE!
    }, [useList]);

    return (
        <React.Fragment>
            IsBusy: {isBusy}
        </React.Fragment>
    );
}

也許我沒有得到它，但我只想在 state 說它不忙時獲取 useList 數據。 但是，這樣做，我得到上面列出的錯誤。 我知道我不能以與 Component 類相同的方式來考慮這一點，但是您將如何從回調中處理單個和多個渲染？

我不完全確定這里發生了什么，因為我在 useConnections 等中做了類似的事情並且沒有得到同樣的錯誤？

Answer 1

鈎子的 lint 規則假定以“use”開頭的東西是鈎子。 因此它認為 useList 是一個鈎子，並試圖在它上面強制執行鈎子的規則。 但它實際上並不是一個鈎子，它只是一個普通的 function，所以你只需要給它一個不同的名字就可以滿足 lint 規則。

function useListProvider = () => {
    const { makeRequest } = useConnections();

    const callback = React.useCallback(async (props) => {
        const response = await makeRequest(props);

        return { body: response.body };
    }, [makeRequest])

    return { callback };
}

// elsewhere:

const { callback } = useListProvider();

React.useEffect(() => {
    if (!isBusy) { 
      callback(); 
      setIsBusy(false);
    }
}, [callback]);

為什么不是鈎子？ 好吧，鈎子要么是內置鈎子之一，要么是調用內置鈎子之一的 function。 您的回調不符合這些條件。 它是由 useCallback創建的，但這只是意味着它是一個記憶的 function，而不是一個鈎子。