为什么这个自定义钩子在反应中返回未定义？答案

【问题标题】：Why does this custom hook return indefined in react?为什么这个自定义钩子在反应中返回未定义？
【发布时间】：2021-03-03 08:45:45
【问题描述】：

我正在 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。我不知道为什么。

有什么想法吗？提前致谢。

【问题讨论】：

你在fetchData()里面做fetch()吗？你的useFetch() 也没有返回任何东西
你没有返回任何东西。你应该使用useState 和useEffect
@NickParsons 最终目标是确实在 fetchData 内部进行 fetch，我将如何让我的 useFetch 返回 FetchData();？
正是@ritaj 所说的。在此处查看完整示例reactjs.org/docs/hooks-custom.html

标签： javascript reactjs react-hooks

【解决方案1】：

您的自定义挂钩没有返回任何内容。您应该添加一个状态以保留该值并返回它

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])

【讨论】：

感谢您的回答！这行得通。我发现在 React 中使用正常逻辑非常困难......因为，为什么我需要状态呢？状态用于组件的状态，对吗？当 de 状态改变时，组件会重新渲染。那么为什么这里需要状态呢？