為什么這個自定義鈎子在反應中返回未定義？

Question

我正在 React 中創建一個自定義鈎子，這是我的代碼：

import {useEffect} from 'react';

const useFetch = (url) => {
    useEffect(() => {
        const fetchData = () => {
            const data = url + "TEST";
            return data;
        }
        fetchData();
    })
}

export default useFetch;

它現在返回一些虛擬值，但這只是出於測試目的。

這是我調用自定義鈎子的地方：

const Data = useFetch("https://customapiurlrandom.com/");
 useEffect(() => {
 console.log(Data);
}, [])

問題是，當我檢查我的控制台時，我看到了undefined 。 我不知道為什么。

有任何想法嗎？ 提前致謝。

Answer 1

您的自定義掛鈎沒有返回任何內容。 您應該添加一個 state 以保留該值並返回它

import {useEffect, useState} from 'react';

const useFetch = (url) => {
    const [data, setData] = useState(null);

    useEffect(() => {
        const fetchData = () => {
            const data = url + "TEST";
            return data;
        }
        setData(fetchData());
    },[url, setData]);

    return data;
}

export default useFetch;

然后像這樣使用

const Data = useFetch("https://customapiurlrandom.com/");
useEffect(() => {
    console.log(Data);
}, [Data])