最佳实践 React hooks HTTP 加载答案

【问题标题】：Best practises React hooks HTTP loading最佳实践 React hooks HTTP 加载
【发布时间】：2020-01-21 05:56:26
【问题描述】：

我最近开始了另一个使用 react 的项目，因为我有一点时间来摆弄，我使用了带有钩子的功能组件。我没有任何问题，只有一件事我不确定我是否正确使用，这里有一个例子：

function MyComponent() {
  const [data, setData] = useState([]);
  const [dataLoaded, setDataLoaded] = useState(false);

  var getDataFromHTTP = async () { ... }

  var loadData = async () => {
    if (!dataLoaded) {
      setDataLoaded(true);
      setData(await getDataFromHTTP());
    }
  }

  loadData();

  return( ... );
}

如果我喜欢一切的完成方式，我想使用 loadData();就像前面的例子一样，我尝试用这样的东西来使用 useEffect ：

useEffect(() => {
  loadData();
}, []);

但后来我收到一个警告，例如“loadData 应该是 useEffect 的依赖项”。如果我省略 useEffect 的第二个参数，看起来和直接放在 MyComponent 中是一样的。所以基本上，我的问题是，在这个例子中，安装组件时加载数据的最佳做法是什么？当然，当道具/状态发生变化时，如果需要重新加载它的最佳做法是什么？

编辑：我对 useEffect 的警告是：

[Warning] ./src/list/main.js (1.chunk.js, line 25568)
Line 53:  React Hook useEffect has a missing dependency: 'loadData'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

【问题讨论】：

查看 robinwieruch.de/react-hooks-fetch-data ，您的带有 useEffect() 的代码看起来不错。唯一奇怪的是，在loadData() 中，您不是在await 调用getDataFromHTTP，即async，也许setData(<promise>) 会导致问题？尝试let result = await getDataFromHTTP(); setData(result); 并让我们知道它是如何进行的:) 另外，上述文章可能会有所帮助。干杯
哎呀，这是我写的一个小例子的代码，我忘了等待。无论如何，我的代码有效，我只是在问我应该如何以“最好的方式”做到这一点
我将第二个选项作为“最佳方式”并尝试修复错误。感谢您清除它！

标签： reactjs react-hooks

【解决方案1】：

useEffect 的工作方式是每当依赖数组中的某些内容发生更改时，React 都会运行该效果

useEffect(() => {
  loadData();
}, [loadData]); // <-- dependencies array

但是，由于您已将 loadData 声明为普通函数，因此它将在每次渲染时重新分配给新函数并触发效果。最好的方法是将您的 loadData 函数包装在 useCallback 挂钩中

const loadData = useCallback(async () => {
    if (!dataLoaded) {
      setDataLoaded(true);
      setData(await getDataFromHTTP());
    }
}, [])

【讨论】：

skyboyer，是的，当然，而且会有参数。我只是不明白为什么必须将 const 函数声明为依赖项。我仍然认为一个小壮举的代码太多了，我不明白为什么。我会继续努力的^^'
不确定你所说的“为什么必须将 const 函数声明为依赖项”是什么意思，你能解释一下吗，也许我可以帮忙。
我明白了，我重读了你的解释，已经很清楚了，对函数进行挂钩，以避免在每次渲染时遇到“新”函数。