Next.js中Redux Store更新失败求助：替换Experience数组报错

我在Next.js搭建CV平台，用React Hook Form管理含Experience、Education的动态表单，通过useWatch监听Experience数据变化，在useEffect里dispatch到Redux时，每次触发都报：

TypeError: Cannot assign to read only property 'jobTitle' of object '#<Object>'

当前Redux切片的setExperience实现是：

setExperience: (state, action: PayloadAction<Experience[]>) => {
  state.cv_object.experiences = Object.assign(state.cv_object.experiences, action.payload);
}

问题原因 #

1. Object.assign处理数组时是按索引覆盖合并，不是直接替换整个数组，逻辑不符合需求；
2. React Hook Form返回的表单数据可能是内部冻结的只读对象，用Object.assign把只读对象合并到原数组时，会触发只读属性的赋值错误。

解决方案 #

1. 直接替换Redux中的数组（推荐）

Redux Toolkit内置的Immer允许直接对state做"可变"操作，实际会生成不可变的新状态。修改切片里的setExperience，直接用新数组替换原数组：

setExperience: (state, action: PayloadAction<Experience[]>) => {
  // 直接替换整个数组，Immer自动处理不可变更新
  state.cv_object.experiences = action.payload;
}

2. 若仍有只读问题，提前深拷贝表单数据

如果React Hook Form返回的experiences确实是只读对象，在dispatch前做一次深拷贝，转换成普通可修改对象：

import { useWatch, useForm } from 'react-hook-form';
import { useDispatch } from 'react-redux';
import { setExperience } from '@/features/cvSlice';

// 组件内代码
const { control } = useForm();
const dispatch = useDispatch();
const experiences = useWatch({ control, name: 'experiences' });

useEffect(() => {
  // 用structuredClone深拷贝，也可以用JSON.parse(JSON.stringify())
  const mutableExperiences = structuredClone(experiences);
  dispatch(setExperience(mutableExperiences));
}, [experiences, dispatch]);

这样就能正确替换Redux Store中的Experience数组，同时避免只读属性的报错。

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