更新数组中单个对象的状态值

Question

我有一个项目列表，我想在其中显示加载程序并在完成特定操作后将其隐藏。

例如，这是我的数组项

[
  {
    "id": "69f8f183-b057-4db5-8c87-3020168307c5",
    "loading": null
  },
  {
    "id": "30d29489-0ba9-4e00-bc28-8ad34ff1a285",
    "loading": true
  },
  {
    "id": "5f54ebbd-d380-4a54-bb1d-fc6c76dd1b72",
    "loading": false
  }
]

我正在将项目添加到数组中 loading 值为 null 原因是。我想在状态更新后立即处理，因此我使用 useEffect 钩子来观察任何变化，如果添加了任何具有 loading 值 null 的新项目，那么我继续行动。

我的问题是，当我尝试将单个 loading 值修改为 false 时，它给了我奇怪的行为并将所有 loading 值设置为 false。

我想要的是，当我更改数组中单个项目的加载值时，UI 应该只为更改的项目重新呈现。

如果您想查看 fiddle 的工作示例，这里是 link https://codesandbox.io/s/d8lh4-d8lh4

我哪里错了？

Answer 1

使用这段代码很简单：

setTimeout(() => {
      setItems((existingItems) =>
        existingItems.map((item) =>
          item.id === newItem?.id ? { ...item, loading: false } : item
        )
      );
    }, 2000);

Answer 2

查看您的代码，我认为问题与在 setTimeout 中访问错误的 newItem 和 items 值有关。这两个问题都可以通过执行类似于下面的操作来解决。

 const handleUpload = newItem => {
  // set loading to false to new item after 2 seconds
  setTimeout(
    theNewItem => {
      setItems(exisitingItems =>
        exisitingItems.map(item =>
          item.id === theNewItem.id ? { ...item, loading: false } : theNewItem,
        ),
      );
    },
    2000,
    newItem,
  );
};

Answer 3

您的 useEffect 中有 [items] 依赖项，它在 handleUpload 函数中循环调用 setItems .

更新数组中单个对象的状态值

Update state value of single object in an array

javascript

state

reactjs