React 状态已更新，但网站仍显示旧状态，直到手动刷新

Question

我正在尝试创建一个按钮来删除员工。弹出的对话框将要求确认，确认后，我将使用过滤器设置员工列表的状态以删除已删除的员工，同时还将已删除员工的 ID 发送到 API 以从后端数据库中删除。

但是，即使数据库中的数据被删除，并且更新后的员工列表的console.log()显示不包括被删除的员工，被删除的员工仍然出现在网站上，直到我手动刷新页面并然后它就会消失。

这是我的代码：

    const onDeleteDialogConfirm = (e) => {
        e.preventDefault();
        console.log(deleteID);
        const filteredWorkers = workers.filter(el => el.employeeId !== deleteID);
        console.log(filteredWorkers);
        setWorkers(filteredWorkers);
        deleteWorkers(dispatch, deleteID)
        .then(() => setDialog(dispatch, deleteDialog))
        .catch(() => setDialog(dispatch, {
            ...deleteDialog,
            body: 'Deletion failed. Please retry.'
        }));
        
        setShowDeleteDialog(false);
    }

export const deleteWorkers = async (dispatch, workerId) => {
    try {
        // a DELETE request to /employee/{workerId}
        await axios.delete(`${URL.rest.employee}/${workerId}`);

    } catch (err) {
        setError(dispatch, ERROR.worker);
    }
}

如果我从onDeleteDialogConfirm中删除deleteWorkers功能，点击删除确认按钮将立即从网页中删除已删除的员工，而无需刷新。但是，数据不会从数据库中删除。

Answer 1

在 React 中将数组或对象设置为某种状态时，最好在将对象或数组设置为状态之前先展开该对象或数组。这是因为 React 使用

Object.is

比较来比较旧状态与新状态，如此处所述。

由于您正在更新对象本身，react 会看到它与之前的对象相同，并且没有意识到状态已更新。

这可以通过在设置状态之前传播新数组或对象来解决。在您的情况下，设置状态的正确方法是

setWorkers([...filteredWorkers])

，它将一个全新的对象设置为状态。由于整个对象现在不同了，现在应该触发重新渲染。