Redux Toolkit中删除按钮仅删数组最后一项而非指定项求助

你的问题核心确实是用index作为React组件的key导致的。当删除数组中的某一项后，剩余项的index会重新排序，React会复用之前的组件实例，导致组件内部状态和Redux中的数据对应混乱，看起来像是删了最后一项，但实际是组件和数据的映射关系出错了。

解决步骤： #

1. 给每个表单项添加唯一ID
   不要用index来标识项，而是给每个表单对象生成唯一的id（可以用uuid库，或者自增数字）。修改初始状态和新增表单的逻辑：

// 先安装uuid库：npm install uuid @types/uuid
import { v4 as uuidv4 } from 'uuid';

const initialState: ExperienceState = {
  form: [
    {
      id: uuidv4(), // 初始项添加唯一ID
      companyName: "",
      position: "",
      responsibilities: "",
      startDate: "",
      endDate: "",
    },
  ],
};

// 假设你有新增表单的reducer，也要给新项加ID
addForm: (state) => {
  state.form.push({
    id: uuidv4(),
    companyName: "",
    position: "",
    responsibilities: "",
    startDate: "",
    endDate: "",
  });
},

2. 修改删除逻辑，根据ID删除
   把reducer里的deleteForm改成根据ID过滤，而不是依赖index：

deleteForm: (state, action) => {
  // 现在action.payload传递的是项的id，而非index
  state.form = state.form.filter(item => item.id !== action.payload);
},

3. 更新渲染时的key和传递的标识
   渲染组件时用item的id作为key，同时传递id给子组件作为删除的标识：

<div>
  {experiences.form.map((data) => {
    return <ExperienceForm key={data.id} formkey={data.id} data={data} />;
  })}
</div>

为什么之前用index不行？ #

React通过key来判断组件是否是同一个实例。当你删除数组中间的项后，后面的项index会减1，React会认为这些组件还是原来的组件，只是更新了props。但子组件如果有内部状态（比如输入框的值），就会和Redux中的新数据不匹配，造成“删除最后一项”的视觉错觉——实际数据已经删对了，但组件显示的是旧状态。

内容的提问来源于stack exchange，提问作者as-0234