React中设置表单数据State数组变量setState不生效如何解决

代码不生效是两个错误导致的：

• 字段更新层级错误：初始化时items是state.formData下的嵌套属性，不是state的一级字段。你写的更新逻辑是在state根节点新增了一个无关的items字段，根本没有触达formData下的目标属性。
• this指向丢失：React类组件的自定义方法如果没有手动绑定this，方法执行时this不会指向组件实例，setState方法本身就无法正常调用。

1. 修正setState的更新逻辑 #

更新嵌套状态时必须保留formData下的其他原有字段，避免覆盖丢失emp_location、emp_designation的值，推荐用函数式更新规避异步state带来的旧值问题：

onSelect(selectedList) {
  this.setState(prevState => ({
    formData: {
      ...prevState.formData, // 展开保留formData下原有字段
      items: selectedList // 仅覆盖更新items字段
    }
  }));
}

如果确认当前逻辑不会拿到旧state，也可以直接传对象更新：

onSelect(selectedList) {
  this.setState({
    formData: {
      ...this.state.formData,
      items: selectedList
    }
  });
}

2. 修复this指向问题 #

三种方案任选其一即可：

• 方案1：定义方法时用箭头函数，自动绑定当前组件实例this（最常用）

onSelect = (selectedList) => {
  // 把上面的setState逻辑写在这里
}

• 方案2：在constructor构造函数中手动绑定this

constructor(props) {
  super(props);
  this.state = {
    checked: true,
    formData:{ 
      emp_location:[],
      emp_designation:"",
      items:[],
    },
  };
  // 手动绑定this
  this.onSelect = this.onSelect.bind(this);
}

• 方案3：组件上绑定事件时用箭头函数包裹

{/* 你的选择器组件，比如react-select */}
<Select onChange={(list) => this.onSelect(list)} />

注意：不要直接写this.state.formData.items = selectedList这种直接修改原state的代码，直接修改状态不会触发React重渲染，必须通过setState返回新的对象引用才能让更新生效。

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