React中删除用户无法实时刷新，需重载页面才消失的问题求助

我想实现表格多选用户并实时删除的功能，目前数据库已成功删除选中的用户，但React前端需刷新页面后才会同步显示删除结果，请求技术帮助。

前端代码 #

const handleDeleteUser = async () => {
    const response = await fetch(`http://localhost:3001/users/deleteUsers`, {
      method: "DELETE",
      body: JSON.stringify(isChecked),
      headers: {
        "Content-Type": "application/json",
      },
    });
    if(response.status === 200){
      const data = await response.json()
      for (let i = 0; i < data.length; i++) {
        const element = data[i];
        setUsers(users.filter((e) => e._id !== element))
        console.log("DELETED ELEMENT",element);
      }
    }
  };

后端代码 #

userRouter.delete("/deleteUsers", async (req, res, next) => {
  try {
    const selectedUsers = req.body;
    // HARD DELETE
    UsersModel.deleteMany(
      {
        _id: {
          $in: selectedUsers,
        },
      },
      function (err, result) {
        if (err) {
          res.status(404).send(err);
        } else {
          res.status(200).send(selectedUsers);
        }
      }
    );
  } catch (error) {
    next(error);
  }
});

前端代码问题分析 #

你当前的前端代码存在关键问题：循环中多次调用setUsers时，每次使用的都是更新前的users状态。因为React的setState是异步批量执行的，循环里的每一次filter操作都基于初始的users数组，最终只会保留最后一次过滤的结果，导致页面无法实时同步删除所有选中的用户。

修改后的前端代码 #

将循环更新状态的逻辑替换为一次性过滤所有待删除的用户ID：

const handleDeleteUser = async () => {
    const response = await fetch(`http://localhost:3001/users/deleteUsers`, {
      method: "DELETE",
      body: JSON.stringify(isChecked),
      headers: {
        "Content-Type": "application/json",
      },
    });
    if(response.status === 200){
      const deletedIds = await response.json();
      // 用函数式更新确保基于最新状态过滤
      setUsers(prevUsers => prevUsers.filter(user => !deletedIds.includes(user._id)));
    }
  };

可选：后端代码优化（非必须） #

后端可以将deleteMany的回调写法改为async/await风格，保持代码一致性：

userRouter.delete("/deleteUsers", async (req, res, next) => {
  try {
    const selectedUsers = req.body;
    // HARD DELETE
    await UsersModel.deleteMany({
      _id: { $in: selectedUsers }
    });
    res.status(200).send(selectedUsers);
  } catch (error) {
    next(error);
  }
});

内容的提问来源于stack exchange，提问作者user18986944