React Context删除对象异常：按_id过滤却删除数组最后一项

可能的原因及解决方案 #

1. 列表渲染时使用了索引作为key值 #

如果映射posts数组渲染Post组件时，用数组索引index作为key，当数组项被删除时，React的diff算法会因为key重复或顺序变化误判组件对应关系，最终表现为删除了最后一项。

修正方式：
必须用每个post的唯一标识（比如_id）作为key，而非索引：

// 错误写法
posts.map((post, index) => <Post key={index} post={post} />)

// 正确写法
posts.map(post => <Post key={post._id} post={post} />)

2. Reducer中状态更新逻辑不规范 #

检查postsReducer的DELETE_POST分支，确保是返回新数组的纯函数，不能直接修改原状态数组。

确认reducer代码：

function postsReducer(state, action) {
  switch(action.type) {
    case 'DELETE_POST':
      // 正确：返回过滤后的新数组，不修改原状态
      return state.filter(post => post._id !== action.payload._id);
    // 其他case逻辑...
    default:
      return state;
  }
}

如果使用state.splice这类直接修改原数组的方法，会导致状态引用未更新，触发异常渲染。

3. 分发动作时payload结构不匹配 #

虽然接口返回的JSON包含正确_id，但需确认payload的结构是否和reducer中的预期一致。比如接口返回嵌套结构（如{ data: { _id: 'xxx' } }），但reducer直接取action.payload._id就会出错。

检查handleDelete代码：

const handleDelete = async () => {
  const res = await fetch(`/api/posts/${post._id}`, { method: 'DELETE' });
  const deletedData = await res.json();
  // 打印确认返回数据的结构
  console.log(deletedData);
  // 若返回嵌套结构，需调整payload取值
  dispatch({ type: 'DELETE_POST', payload: deletedData.post || deletedData });
}

4. Context Provider的状态引用问题 #

确保PostContextProvider中正确使用useReducer，状态更新完全依赖reducer返回的新值，不要直接修改初始状态或现有状态变量。

确认Provider代码：

const PostContextProvider = ({ children }) => {
  const [posts, dispatch] = useReducer(postsReducer, initialPosts);
  
  return (
    <PostContext.Provider value={{ posts, dispatch }}>
      {children}
    </PostContext.Provider>
  );
}

总结 #

最常见的触发原因是列表渲染用了索引key，其次是reducer状态更新不规范或payload结构不匹配。按上述步骤逐一排查即可解决问题。

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