javascript - 为什么 react 不更新 "then" promise 中的状态？

Question

我有一个表，每行都有 Delete 按钮。当您删除该行时，客户端将异步发送请求执行 API。这意味着，如果您快速删除多行，则不必等待一个请求完成即可发送另一个删除请求。当您单击 Delete 按钮并发送请求时，该按钮将被禁用(在响应返回之前，该行将消失)。

这是处理容器中删除的函数:

  const [deletingTeams, setDeletingTeams] = useState([]);

  const handleDelete = (teamId) => {
    setDeletingTeams([...deletingTeams, teamId]);

    deleteTeam(teamId).then(() => {    
      console.log(deletingTeams); <---- This prints EMPTY array. Why????   
      let newState = deletingTeams.filter((id) => id !== teamId);
      setDeletingTeams(newState);
    });
  };

很简单。 deletingTeams 是一个数组，其中包含当前正在删除的团队的 ID(该 API 没有返回响应，删除成功)。

在第 3 行 (setDeletingTeams([...deletingTeams, teamId]);) 中，我将新的 teamId 添加到数组中，它起作用了。新数组被传递到 List 组件并且 Delete 按钮确实被禁用。 但是...

...当响应返回时，在 then promise 中，我想从数组中删除 teamId。问题是，deletingTeams 数组已经为空(在过滤器之前)。为什么？？

感谢您的解释，

Answer 1

状态更新是异步的——您不能保证立即看到更新状态的最新值。

使用回调方法来过滤和设置状态。

const [deletingTeams, setDeletingTeams] = useState([]);

const handleDelete = (teamId) => {
  setDeletingTeams([...deletingTeams, teamId]);

  deleteTeam(teamId).then(() => {
    // console.log(deletingTeams); //<---- state updates are async - you will see the latest value of the state in the next re-render
    // let newState = deletingTeams.filter((id) => id !== teamId); //<---- remove this
    setDeletingTeams((prev) => prev.filter((id) => id !== teamId)); //<--- use call back approach to set the state
  });
};