已删除的用户在刷新页面后消失时没有实时反应

Question

我想从表中选择多个用户并实时删除它们。当我检查数据库时，它正在删除选定的用户，但从前端来看，它是在刷新页面后发生的。有人能帮我吗？这是我的FE代码：

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);
}
}
};

BE代码：

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);
}
});

Answer 1

您对处理setState的方式完全错误。setState不能像for循环那样在单个上下文中是多个，因为setState在重新渲染后会更新状态。试试这个方法。

const data = await response.json()
setUsers(users.filter(user => !data.find(row => row.id === user.id)))//don't know your properties adjust this code on yourown.
console.log("DELETED ELEMENT", data);

我认为您应该查看参考资料，以了解状态在react中是如何工作的。

Answer 2

每当我们在react应用程序上管理数据时，我们称之为状态管理。有一些工具&在react中处理状态管理的包，如redux工具包和react查询。

现在您的问题是数据不是持久的，为了使这些数据持久化，您可以使用大量选项，其中一些选项是redux工具箱持久化和react查询。