React 覆盖 setState 上的所有状态

Question

我有以下设置：

this.state = {
  values: {
    id: null,
    name: "",
    unitName: "",
    unitCategory: ""
  }
};

当我更改表单中字段中的值时，我具有以下handleChange功能：

this.setState({
  values: {
    [e.target.name]: e.target.value
  }
});

问题是 - 这会从values我的状态中的对象中删除所有其他值，只留下正在修改的值（即<input name="name" />）。

我怎样才能保留所有其他价值观？

编辑 代码现在看起来像：

this.setState(prevState => {
  console.log(prevState.values);
  return {
    values: {
      ...prevState.values,
      [e.target.name]: e.target.value
    }
  };
});

回报console.log(prevState.values)：

{id: 2, name: "Humidity", unitName: "himidity", unitCategory: "%"}

它应该是这样的，但是当我将它传播到values对象中时，我得到：

TypeError: Cannot read property 'name' of null

Answer 1

使用扩展语法将其他属性扩展为状态：

this.setState(prevState => ({
  values: {
    ...prevState.values,
    [e.target.name]: e.target.value
  }
}));

这还利用回调来setState确保正确使用先前的状态。如果您的项目尚不支持对象扩展语法，您可以使用Object.assign：

values: Object.assign({}, prevState.values, {
  [e.target.name]: [e.target.value]
})

这本质上是做同样的事情。它从一个空对象开始以避免突变，并将prevState.values的键和值复制到该对象中，然后将键[e.target.name]及其值复制到该对象中，覆盖旧的键和值对。

另外，我不确定你为什么要做这一切：

this.state = {
  values: {
    id: this.state.values.id ? this.state.values.id : null,
    name: this.state.values.name ? this.state.values.name : "",
    unitName: this.state.values.unitName ? this.state.values.unitName : "",
    unitCategory: this.state.values.unitCategory? this.state.values.unitCategory: "
  }
};

当您在构造函数中设置初始状态时，只需给出初始值，您的三元运算符永远不会给您真实的条件：

this.state = {
  values: {
    id: null,
    name: '',
    unitName: '',
    unitCategory: ''
  }
};