React中functional setState设置state.siocId值的问题求助

嘿，我来帮你搞定这个问题！你现在的核心问题是对functional setState的用法理解有点偏差，导致更新后的状态变成了嵌套结构，咱们一步步理清楚：

问题出在哪？ #

你原来的代码：

handleChange(e) { 
  const {value} = e.target; 
  this.setState(state => ({ siocId: {...state.siocId, siocId: value} })); 
}

这里你用了{...state.siocId, siocId: value}，意思是展开state.siocId这个对象，然后给它新增/覆盖一个siocId属性，所以最终this.state.siocId会变成一个包含原属性+新siocId: value的对象，自然就出现了siocId.siocId的嵌套结构，这和你想要的直接把this.state.siocId设为value完全不符。

正确的写法 #

根据你的需求，直接把this.state.siocId赋值为value，分两种情况：

情况1：state里只有siocId一个字段

如果你的状态对象只有siocId，那直接返回{siocId: value}就行，React会自动合并更新：

handleChange(e) {
  const { value } = e.target;
  this.setState(state => ({ siocId: value }));
}

情况2：state里还有其他字段（比如name、age等）

如果要保留其他状态字段不丢失，就需要先展开当前state，再覆盖siocId的值：

handleChange(e) {
  const { value } = e.target;
  this.setState(state => ({ ...state, siocId: value }));
}

你之前尝试的{...state, siocId: value}其实是对的，如果当时没成功，大概率是**this的绑定问题**——要确保handleChange里的this指向组件实例，你可以用这两种方式解决：

• 在构造函数里绑定this：

  constructor(props) {
    super(props);
    this.state = { siocId: '' };
    this.handleChange = this.handleChange.bind(this);
  }
  

• 用箭头函数定义handleChange：

  handleChange = (e) => {
    const { value } = e.target;
    this.setState(state => ({ ...state, siocId: value }));
  }
  

总结一下 #

functional setState的回调函数返回的是要更新的状态片段，当你想直接替换某个字段的值时，不需要去展开该字段本身，直接赋值即可；只有当该字段是一个对象，你想更新它的某个子属性时，才需要展开这个对象再修改。

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