React中使用Reducer删除数据后如何更新状态？

一、修正Reducer逻辑 #

你的核心问题出在Reducer的过滤条件上：你误用了数组的索引值作为匹配依据，而实际需要对比的是评论对象自身的_id字段。

修改后的Reducer代码：

switch (action.type) {
    case 'COMMENT_DELETE':
        return {
            ...state,
            comments: state.comments.filter(comment => comment._id !== action.payload)
        } 
    //...其他case逻辑
}

二、优化删除函数的Dispatch逻辑 #

你的Dispatch写法本身没问题，但建议增加异常处理，避免删除请求失败后错误更新状态：

const onCommentDelete = async (id) => {
    try {
        await commentService.deleteComment(id);
        // 仅当删除请求成功时，才触发状态更新
        dispatch({
            type: 'COMMENT_DELETE',
            payload: id,
        });
    } catch (error) {
        // 这里可以添加用户提示或错误日志
        console.error('删除评论失败:', error);
    }
}

原代码无效的原因 #

从你提供的评论结构来看，每条评论的唯一标识是_id字段（UUID格式的字符串），但你之前在filter中使用的第二个参数commentId是数组的索引（0、1、2...），两者完全不匹配，导致过滤后无法移除目标评论，状态自然不会更新。

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