React.js中向数组插入元素时的状态突变问题

这个错误的根源很明确——你直接修改了React State里的原数组，违反了React的不可变更新原则。React依赖State引用的变化来检测组件是否需要重新渲染，直接用push修改原数组的话，数组的引用没有改变，React不仅无法正确识别状态更新，还会触发这个mutation警告。

正确的做法：创建副本后再修改 #

我们需要先复制原有的formValues对象和q3对应的数组，修改副本后再通过setState更新状态。这里给你两种常用的实现方式：

方法1：使用展开运算符（推荐，语法简洁）

// 获取当前state中的formValues，创建一个浅拷贝
const updatedFormValues = { ...this.state.formValues };
const q3 = e.target.name;
const arrayValues = [1,2,3];

// 复制原q3数组，再将新数组的元素展开添加进去
updatedFormValues[q3] = [...updatedFormValues[q3], ...arrayValues];

// 最后更新state
this.setState({ formValues: updatedFormValues });

如果是添加单个元素，不用展开新值，直接写：[...updatedFormValues[q3], newItem]即可。

方法2：使用concat方法（concat返回新数组，不修改原数组）

const q3 = e.target.name;
const arrayValues = [1,2,3];

// 直接在拷贝formValues的同时，更新q3字段
const updatedFormValues = {
  ...this.state.formValues,
  [q3]: this.state.formValues[q3].concat(arrayValues)
};

this.setState({ formValues: updatedFormValues });

额外提醒：处理q3未初始化的情况 #

如果q3字段在初始formValues中可能不存在（不是数组类型），要先做兼容处理，避免调用push或concat时报错：

const updatedFormValues = { ...this.state.formValues };
const q3 = e.target.name;
const arrayValues = [1,2,3];

// 若q3未定义，就用新数组；否则复制原数组并添加新值
updatedFormValues[q3] = updatedFormValues[q3] 
  ? [...updatedFormValues[q3], ...arrayValues] 
  : [...arrayValues];

this.setState({ formValues: updatedFormValues });

核心记住：永远不要直接修改State中的对象或数组，必须创建它们的副本进行修改，再通过setState传递新的引用，这样React才能正确追踪状态变化，避免这类mutation错误。

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