0

我一直在使用 React 应用程序，遇到了一个奇怪的问题，我想我知道原因，但仍然找不到解决方法。我有一个存储在变量中的对象数组。现在，我需要对该数组中的每个对象进行 API 调用，并在收到调用响应时更新其上的某个字段，然后设置 React 组件的状态。

API 调用一次接收一个对象作为参数，因此我需要为状态数组中的每个对象同时进行多个 API 调用。如此多的 API 调用和大量的状态设置器函数调用。

实际的代码库非常复杂，所以我在这里重建了它的基本版本。API 调用只会email在现有对象上添加一个属性，然后更新本地状态。我已经模拟了一个 API 调用setTimeout，并且 API 调用函数在组件挂载时触发。当循环完成并且所有setState调用都完成时，我在浏览器上得到的只是状态变量中的最后一个对象，而不是所有对象。

所以我希望得到这样的回应

[
  {
    id: 1,
    name: 'Adam',
    email: 'adam@gmail.com'
  },
  {
    id: 2,
    name: 'Michael',
    email: 'michael@gmail.com'
  },
  {
    id: 3,
    name: 'Joseph',
    email: 'joseph@gmail.com'
  },
  {
    id: 4,
    name: 'Noah',
    email: 'noah@gmail.com'
  }
]

但我得到的是

[
  {
    id: 4,
    name: 'Noah',
    email: 'noah@gmail.com'
  }
]

我猜这是因为 React 状态变量的 setter 函数的异步特性。因此，连续的设置状态调用都使用初始状态，因为之前的调用还没有更新状态。

所以，问题来了，我需要立即对数组中的所有条目进行 API 调用，一旦我得到响应，我需要更新状态。我在这里看到的一些答案谈论使用 Promise.all 但我相信这将等到所有 API 调用都得到解决，但这会影响我的应用程序的性能。也不能在这里使用 useEffect ，因为我不想等待一个 API 调用完成然后再调用下一个。但也许我没有正确理解 useEffect ？

我自己真的想不出任何解决方案，所以我非常感谢您帮助找到解决这个问题的另一种方法。

4

1 回答 1

0

您需要将users对象作为依赖项传递给，useEffect()否则每次fetchUsers()调用时它都会访问其初始状态。

  React.useEffect(() => {
    fetchUsers();
  }, [users]);

的初始状态users是此处定义的空数组

const [users, setUsers] = React.useState([]);

您可以阅读文档

如果传递一个空数组 ([])，则效果内的 props 和 state 将始终具有它们的初始值。

请阅读文档。

于 2021-08-09T07:06:06.930 回答