MERN+Redux/Toolkit项目删除功能前端显示异常问题求助

你遇到的删除产品时前端错误移除最后一行的问题，根源在于Redux切片中删除逻辑的匹配条件错误：

在productSlice.js的deleteProductSuccess reducer里，你用item._id === action.payload做匹配，但实际上apiCalls.js中deleteProduct方法传递给deleteProductSuccess的res.data是后端返回的被删除的产品对象（而非产品ID）。这会导致findIndex找不到匹配项，返回-1，而splice(-1, 1)会直接移除数组的最后一个元素，也就是你看到的删item1却删了item3的现象。

有两种简单的修复方式，任选其一即可：

方式1：修改Reducer中的匹配逻辑（推荐） #

直接使用返回的产品对象的_id进行匹配，同时用filter替代splice（更安全，避免索引错误）：

// productSlice.js
deleteProductSuccess: (state, action) => {
  state.isFetching = false;
  // 过滤掉被删除的产品
  state.products = state.products.filter(item => item._id !== action.payload._id);
},

如果坚持用splice，需要先正确获取索引并判断有效性：

// productSlice.js
deleteProductSuccess: (state, action) => {
  state.isFetching = false;
  const deleteIndex = state.products.findIndex(item => item._id === action.payload._id);
  // 仅当找到对应项时执行删除
  if (deleteIndex !== -1) {
    state.products.splice(deleteIndex, 1);
  }
},

方式2：修改API调用传递的参数 #

如果后端支持，可以让DELETE接口返回删除的产品ID而非完整对象，或者在前端传递时直接传ID：

// apiCalls.js
export const deleteProduct = async (id, dispatch) => {
  dispatch(deleteProductStart());
  try {
    await publicRequest.delete(`/products/${id}`);
    // 直接传递删除的ID，而非res.data
    dispatch(deleteProductSuccess(id));
  } catch (err) {
    dispatch(deleteProductFailure());
  }
};

这种方式下，原有的Reducer逻辑无需修改。

可以在deleteProductSuccess里加个console.log(action.payload)，确认后端返回的是产品对象还是ID，这能快速定位问题。

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