如何在Redux Reducer的map方法内部执行filter操作删除数组元素

核心问题点 #

• Action传递的payload缺失必要参数：你在removeTask中触发dispatch时，仅传入了要删除的task字符串，没有同步传入对应post的id，reducer无法定位到需要修改的目标数据。
• Reducer逻辑破坏原有数据结构：你对state.post执行map操作时直接返回了过滤后的task数组，会将原有的post对象（包含_id、username、time等字段）直接替换为数组，完全打乱了原有数据结构。
• 缺少id匹配逻辑：现有reducer逻辑会对所有post的task数组执行过滤，不符合仅修改指定id对应post的需求。

修复步骤 #

1. 修正Action Creator #

调整payload结构，同时传入目标post的id和要删除的task字符串：

export const removeTask = (id, taskToDelete) => async (dispatch) => {
    try {
        await api.deleteTask(id, taskToDelete);
        dispatch({ type: 'DELETE', payload: { id, taskToDelete } });
    } catch (error) {
        console.log(error);
    }
}

2. 修正Reducer逻辑 #

保留原有数据结构，仅修改匹配id的post的task字段：

case 'DELETE':
     return {
        ...state, // 保留state中其他未修改的字段
        post: state.post.map(data => {
            // 仅修改id匹配的post数据
            if (data._id === action.payload.id) {
                return {
                    ...data, // 保留post的其他原有字段
                    task: data.task.filter(item => item !== action.payload.taskToDelete)
                }
            }
            // 非目标数据直接返回，不做修改
            return data;
        })
}

3. 确认调用传参正确 #

调用removeTask时，第一个参数传入目标post的_id值，第二个参数传入你要删除的task数组内的具体字符串值，不要传入整个post对象：

const deleteRequest = (e) => {
        e.preventDefault();
        // 示例：要删除_id为6122507bc5867440784a9421的post下task数组中的"asd"
        dispatch(removeTask("6122507bc5867440784a9421", "asd"));
}

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