React useEffect更新状态不重渲染，批准用户后如何移除列表项？

要实现点击批准后用户从列表中移除的功能，核心是更新Redux状态中该用户的isAdmin属性，让组件自动过滤掉已成为管理员的用户。以下是具体步骤和代码修改：

1. 修复Redux Slice中的状态更新逻辑 #

当前approveUser的fulfilled回调没有更新Redux状态，导致组件无法感知用户权限变化。需要在userSlice中添加状态更新代码：

// userSlice.js
[approveUser.fulfilled]: (state, action) => {
    state.isLoading = false;
    // 从请求参数中获取用户ID
    const targetUserId = action.meta.arg._id;
    // 更新对应用户的isAdmin属性为true
    state.users.data = state.users.data.map(user => 
        user._id === targetUserId ? {...user, isAdmin: true} : user
    );
},

额外修复：修正isLoading状态逻辑 #

当前所有pending回调错误地将isLoading设为false，导致加载状态失效。需将所有pending分支改为true：

// 示例：getAllUsers的pending回调
[getAllUsers.pending]: (state) => {
    state.isLoading = true;
},
// 其他loginUser、signupUser、approveUser的pending分支同理修改

2. 优化组件代码 #

替换唯一Key #

当前TableRow使用user.name作为key，存在重复风险，改为用户唯一ID：

<TableRow key={user._id} sx={{ '&:last-child td, &:last-child th':{border: 0} }}>

可选：添加加载状态展示 #

利用修复后的isLoading状态，在数据加载时显示加载动画：

return (
    <>
        {isLoading && (
            <div className={loaderContainer}>
                <CircularProgress />
            </div>
        )}
        <TableContainer component={Paper}>
            {/* 原有表格代码 */}
        </TableContainer>
    </>
);

3. 原理说明 #

• 点击批准按钮时，dispatch(approveUser)触发API请求，同时Redux会在请求完成后执行fulfilled回调。
• 在回调中，我们找到目标用户并将其isAdmin设为true，更新Redux状态。
• 组件通过useSelector监听状态变化，重新渲染时会自动过滤掉isAdmin: true的用户，实现从列表移除的效果。

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