Question

我最近开始了另一个带有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（）很脏；就像前面的示例一样，我尝试将Effect与这样的东西配合使用：

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

Answer 1

useEffect的工作方式是只要依赖项数组更改中的某些东西React都会运行该效果

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

但是正如您将loadData声明为普通函数一样，它将在每个渲染器上重新分配给新函数，并触发效果。最好的方法是将您的loadData函数包装在useCallback钩子中

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

最佳实践React挂钩HTTP加载

1 个答案: