React+Redux中点击删除按钮无法从数组状态移除对象的问题排查求助

咱们一步步拆解你代码里的问题，把删除功能给修复好：

1. Action 未传递要删除的事件ID #

你的RemoveEvent action明明定义了接收id参数，但返回的action对象里根本没把这个ID作为payload传出去，而且组件调用的时候也没传当前要删除的事件ID——reducer根本不知道要删哪条数据啊！

修复Action代码： #

export const RemoveEvent = (id) => { 
  return { 
    type: ActionsTypes.REMOVE_EVENT, 
    payload: id // 把要删除的ID作为payload传递给reducer
  }; 
};

2. 组件未传递当前事件ID给删除函数 #

你的removeEventHandler没有接收参数，点击按钮时也没把循环里的singleEvent.id传进去，导致action拿不到目标ID。

修复Event组件的删除逻辑： #

import React from 'react' 
import { useSelector, useDispatch } from 'react-redux'; 
import { RemoveEvent } from '../Redux/Actions/ActionsEvents'; 

const Event = () => { 
  const events = useSelector((state)=> state.allEvents.events); 
  const dispatch = useDispatch(); 

  // 修改删除函数，接收要删除的事件ID
  const removeEventHandler = (eventId) => { 
    dispatch(RemoveEvent(eventId)) 
  } 

  return ( 
    <section> 
      {events.map((singleEvent)=> { 
        const {title, id, day} = singleEvent; 
        return ( 
          <article className="event-pop-up" key={id} > 
            <h1>The Name of your Event is <span>{title}</span></h1> 
            {/* 点击时传递当前事件的ID */}
            <button className="btn event" onClick={() => removeEventHandler(id)}> Delete Event</button> 
          </article> 
        ) 
      })} 
    </section> 
  ) 
} 

export default Event;

3. RemoveEventReducer 实现完全错误 #

你现在的removeEventReducer直接返回空对象，这会把整个状态清空！而且这个reducer应该基于原有events数组过滤掉目标项，更合理的做法是把删除逻辑合并到维护events数组的SetEventReducer里（因为都是操作同一个状态分支）。

修复Reducer代码： #

import { ActionsTypes } from "../Constant/ActionsTypes";
const initialState = { 
  events : [], 
  days : (""), 
}; 

export const SetEventReducer = (state = initialState, action) => { 
  switch(action.type) { 
    case ActionsTypes.SET_EVENTS : 
      return {... state, events : action.payload}; 
    // 添加删除事件的处理逻辑
    case ActionsTypes.REMOVE_EVENT : 
      return {
        ...state,
        // 过滤掉ID等于payload的事件
        events: state.events.filter(event => event.id !== action.payload)
      };
    default : 
      return state; 
  } 
}; 

export const trackDaysReducer = (state= initialState, action) => { 
  switch(action.type) { 
    case ActionsTypes.TRACK_DAYS: 
      return {... state, days : action.payload} 
    default : 
      return state; 
  } 
}; 

// 原来的removeEventReducer可以删掉了，逻辑已经合并到SetEventReducer里

4. 清理组件里的多余代码 #

你之前写的const removeEvents = useSelector((state)=> state.removeEvents);完全没用，因为删除操作是修改allEvents.events数组，直接删掉这行就行。

最后验证要点： #

• 确保ActionsTypes.REMOVE_EVENT已经在常量文件里正确定义
• 确认你的store用combineReducers合并reducer时，SetEventReducer对应的key是allEvents（和组件里useSelector取的路径一致）
• 点击删除按钮时，对应的事件ID会被传递到action，reducer过滤数组更新状态，组件重新渲染后该事件就会消失

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