React/Redux Toolkit删除数组状态时组件渲染与状态不一致问题

核心问题1：列表渲染使用索引作为key #

React依赖key识别列表中的唯一组件，用数组索引作为key时，删除元素后剩余元素的索引会变动，React会复用旧组件实例而非重新渲染对应新数据的组件。比如删除filter1后，原索引0的组件会被复用，对应新数组的filter2，但组件本地状态仍保留原来filter1的内容，直接导致UI显示错乱。

修复方案： #

将key替换为filter的唯一标识（如id）：

// Filters组件中修改map渲染部分
{formState.form.map((filter) => {
  return <FilterForm defaultState={filter} key={filter.id} />
})}

注：无需传递index，唯一id已足够作为组件标识

核心问题2：FilterForm本地状态未同步Redux更新 #

FilterForm初始化时用useState(defaultState)创建了本地状态，但当Redux中的filter数据更新（比如其他操作修改filter、父组件defaultState变化）时，本地状态未同步。当前的useEffect仅在本地状态变化时更新Redux，未监听defaultState的变化来同步本地状态。

修复方案： #

添加useEffect监听defaultState，同步Redux数据到本地状态：

const FilterForm: NextPage<FilterFormProps> = ({ defaultState }) => {
  const [filterState, setFilterState] = useState(defaultState)
  
  // 同步Redux中的最新数据到本地状态
  useEffect(() => {
    setFilterState(defaultState)
  }, [defaultState])

  // 其余逻辑保留...
}

注意：变量名统一为小驼峰，FilterState改为filterState，符合React代码规范

额外优化点 #

1. 确保Redux reducer删除元素时返回新数组（避免直接修改原state）：

// reducer中正确写法
return {
  ...state,
  form: {
    ...state.form,
    filters: state.form.filters.filter(f => f.id !== action.payload.id)
  }
}

2. FilterForm无需订阅整个formState，已通过defaultState获取当前filter数据，移除多余的useSelector：

// 删除该行冗余代码
// const formState = useSelector((state: any) => state.form.formState)

验证效果 #

修改完成后，删除filter1时：

• React会根据id正确识别待移除组件，不会复用旧组件
• 剩余组件的本地状态会同步Redux中的最新数据，UI显示将与Redux状态完全匹配

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