Question

我正在尝试使用for循环更新数组中的每个元素

当您点击“全部添加”按钮时，它应该开始更新数组的每个元素

更新应该一个接一个地发生，并且应该在用户界面中可见

该数组存储在useState钩子中

但是，数组未按预期更新

这是CodeSandBox的链接：https://codesandbox.io/s/heuristic-hooks-z3wq7?file=/src/App.js

export default function App() {

  const [users, setUsers] = useState(() => fakeUsers);

  function addHandler(id){
      let arr = cloneDeep(users);
      let i = arr.findIndex((u) => u.id === id);
      arr[i].added = true;
      setUsers(arr);
  };

  async function addAll() {
    for (let i = 0; i < users.length; i++) {
      let id = users[i].id;
      await delay(1000);
      addHandler(id);
    }
  }

  return (
    <div className="App">
      <button onClick={addAll}>add all</button>
      {users.map((e) => (
        <div>
          {e.name}-{e.added ? "YES" : "NO"}
        </div>
      ))}
    </div>
  );
}

Answer 1

使用传播运算符而不是cloneDeep。

此外，不确定为什么要使用箭头功能设置初始状态。

这是更新的代码

export default function App() {
  const [users, setUsers] = useState(fakeUsers);

  function addHandler(id) {
    let arr = [...users];
    let i = arr.findIndex((u) => u.id === id);
    arr[i].added = true;
    setUsers(arr);
  }

  async function addAll() {
    for (let i = 0; i < users.length; i++) {
      let id = users[i].id;
      await delay(1000);
      addHandler(id);
    }
  }

  return (
    <div className="App">
      <button onClick={addAll}>add all</button>
      {users.map((e) => (
        <div>
          {e.name}-{e.added ? "YES" : "NO"}
        </div>
      ))}
    </div>
  );
}

Answer 2

您正在使用用户数组的过期版本。添加第二个用户时，它将使用未添加任何数组的引用。

您可以向setState提供更新功能，以始终使用当前引用：

setUsers(users => {
  let arr = cloneDeep(users);
  let i = arr.findIndex((u) => u.id === id);
  arr[i].added = true;
  return arr
})

数组不使用useState钩子和for循环更新

2 个答案: