小编Jon*_*ell的帖子

我正在重构一些代码并将我的类组件转换为函数组件，以此作为学习如何使用 Hooks 和 Effects 的一种方式。我的代码使用 Redux 进行状态管理，使用 axios 进行数据库请求，使用 Thunk 作为中间件处理异步性。我在一个组件中遇到问题，该组件执行 get 请求以检索过去的客户列表componentDidMount。无论我尝试什么，该useEffect函数都会进入无限循环并继续请求客户列表。

有问题的组件CustomersTable从数据库中获取客户列表并将其显示在表格中。该组件由容器组件包装，该组件使用 Redux 的连接将检索到的客户列表CustomersTable作为道具传递给。

useEffect(() => {
    loadCustomers(currentPage, itemsPerPage, sortProp, (ascending ? 'asc' : 'desc'), {});
  }, []);

loadCustomers 是一个 Redux 操作，它使用 axios 来获取客户列表。currentPage、itemsPerPage、sortProp 和升序是初始化为“组件安装”上特定值的状态变量

我希望这是因为我使用空数组，它只会运行一次。相反，它会持续运行。我不明白为什么会这样。我最好的猜测是，当 redux 获取列表时，它返回一个新的 state 对象，因此 props 每次都会改变，然后触发重新渲染，然后获取一个新列表。我使用这个错误是因为 Redux 不打算与这样的钩子一起使用吗？

我最终通过添加以下内容来完成这项工作：

useEffect(() => {
    if (!list.length) {
      loadCustomers(currentPage, itemsPerPage, sortProp, (ascending ? 'asc' : 'desc'), {});
    }
  }, []);

我不确定这是我真正想要的行为。如果客户列表确实为 0，则代码将继续获取列表。如果列表真的是空的，那么我希望它只获取一次然后停止。编辑：事实证明这绝对行不通。它适用于初始加载，但会破坏任何删除或编辑的代码。

好的，在此处提供更多上下文。包装客户表的容器组件是：

import { connect } …