Reactjs HTTP加载的最佳实践

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

函数MyComponent（）{
const[data，setData]=useState（[]）；
const[dataLoaded，setDataLoaded]=useState（false）；
var getDataFromHTTP=async（）{…}
var loadData=async（）=>{
如果（！dataLoaded）{
setDataLoaded（真）；
setData（等待getDataFromHTTP（））；
}
}
loadData（）；
回报率（…）；
}

如果我喜欢每件事的处理方式，我想使用loadData（）是肮脏的；就像在前面的例子中，我尝试使用effect来处理如下内容：

useffect（（）=>{
loadData（）；
}, []);

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

编辑： 我得到的有效警告是：

[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

---

useEffect的工作方式是依赖项数组中的某个更改响应将运行该效果

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

---

看看，使用

useffect（）

的代码看起来不错。唯一奇怪的是，在

loadData（）

中，您没有等待

调用
getDataFromHTTP
，这是
async
，可能是
setData（）
导致了问题？尝试
让result=等待getDataFromHTTP（）；设置数据（结果）
并让我们知道它是如何进行的：）此外，上面提到的文章可能会有所帮助。谢谢，这是我写的一个小例子，我忘了等待。不管怎样，我的代码是有效的，我只是想问我应该如何以“最佳方式”来完成它。我将第二个选项作为“最佳方式”，并尝试修复错误。谢谢你把它清理干净！skyboyer，是的，当然会有参数。我只是不明白为什么常量函数必须声明为依赖项。我仍然认为对于一个小壮举来说，代码太多了，我不明白为什么。我将继续尝试获取它^^不确定您所说的“为什么常量函数必须声明为依赖项”是什么意思，您能解释更多吗，也许我能提供帮助。我明白了，我重新阅读了您的解释，很清楚，对函数进行挂钩，以避免在每次渲染时遇到“新”函数。
const loadData = useCallback(async () => {
    if (!dataLoaded) {
      setDataLoaded(true);
      setData(await getDataFromHTTP());
    }
}, [])