React中useImmer Hook返回空数组，删除数据无法获取渲染数据

问题根源 #

deleteUser函数中访问的userList是组件首次渲染时的闭包值，后续useEffect从接口加载数据更新userList后，这个函数里的变量并不会同步更新，所以打印出来的始终是初始的空数组或你设置的默认假数据，导致过滤后得到空数组。

解决方案：使用useImmer的函数式更新 #

setUserList支持传入一个回调函数，React会自动把当前最新的状态值作为参数传给这个函数，这样就能基于最新的用户列表进行过滤操作。

修改后的deleteUser函数代码：

const deleteUser = async (userId: string) => {
    if (!window.confirm('Benutzer wirklich löschen?')) {
        return;
    }
    try {
        // 统一用await处理异步请求，避免混用await和.then
        const response = await api.delete(`${USER_URL}/${userId}`);
        console.log(response);
        
        // 函数式更新，prevList是当前最新的userList
        setUserList(prevList => prevList.filter(user => user._id !== userId));
    } catch (error: any) {
        console.error(error);
    }
}

额外优化点 #

1. 移除useImmer的默认假数据，保持初始值为空数组即可：

const [ userList, setUserList ] = useImmer<IUser[]>([]);

2. 原代码中async函数混用await和.then，改用try/catch包裹await，代码结构更清晰易维护。

这样修改后，点击删除按钮时就能基于表格中正在渲染的最新用户列表进行过滤，不会再出现清空表格的问题。

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