React Hooks ，函数 fetchData 不是一个 react 组件

Question

我正在玩反应钩子，当我创建一个文件来使用钩子和axios获取数据时，我在尝试获取一些数据时遇到了一个奇怪的问题

这行得通

import axios from 'axios';
const useResources = (resource) => {
    const [resources, setResources ] = useState([]);
    useEffect(
        () => {
            (async resource => {
                const response = await axios.get(`randomapi.com/${resource}`);
                setResources(response.data);
            })(resource);
        },
        [resource]
    );
    return resources;
};
export default useResources;

但这并不

import { useState, useEffect } from 'react';
import Axios from 'axios';
const fetchData = () => {
    const [data, setData] = useState('');
    useEffect( async () => {
        const response = await Axios('randomapi.com/word?key=*****&number={number_of_words}');
        setData(response.data);
    });
    return data;
};
export default fetchData;

'React Hook useEffect包含对'setData'的调用。如果没有依赖项列表，这可能会导致无限的更新链。要解决此问题，请将 [] 作为第二个参数传递给 useEffect Hook。

它们不是一样吗？

Answer 1

乍一看，它们是相似的，但它们仍然存在差异。让我们检查一下：

useEffect(
        () => {
            // we create a function, that works like a "black box" for useEffect
            (async resource => { 
                const response = await axios.get(`randomapi.com/${resource}`);
                // we don't use `setResources` in dependencies array, as it's used in wrapped function
                setResources(response.data); 
            // We call this function with the definite argument
            })(resource); 
        // this callback doesn't return anything, it returns `undefined`
        },    
         // our function depends on this argument, if resource is changed, `useEffect` will be invoked
        [resource] 
    );

useEffect钩子应该接收一个函数，该函数可以返回另一个函数来处置所有动态数据、侦听器(例如删除事件侦听器、清除超时回调等(。

下一个示例：

// this function returns a promise, but actually useEffect needs a function, 
// which will be called to dispose of resources. 
// To fix it, it's better to wrap this function 
// (how it was implemented in the first example)
useEffect( async () => { 
        const response = await Axios('randomapi.com/word?key=*****&number={number_of_words}');
        setData(response.data);
// we don't set up an array with dependencies. 
// It means this `useEffect` will be called each time after the component gets rerendered. 
// To fix it, it's better to define dependencies
}); 

因此，我们有 2 个主要错误：

1(我们的useEffect回调返回一个Promise而不是函数，它实现了释放模式

2(我们错过了依赖数组。因此，组件将在每次更新后调用 useEffect 回调。

让我们修复它们：

useEffect(() => {// we wrap async function: 
  (async () => { 
     // we define resource directly in callback, so we don't have dependencies:
     const response = await Axios('randomapi.com/word?key=*****&number={number_of_words}');
     setData(response.data);
  })()  
}, []); 

最后，我们修复了第二个示例:)我什至用自定义的fetchData钩子和useEffect的最终版本做了一个例子：https://codesandbox.io/s/autumn-thunder-1i3ti

有关依赖项和重构提示的更多信息，您可以在此处查看useEffect：https://github.com/facebook/react/issues/14920