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: ''
  }
};

React会覆盖setState上的所有状态

1 个答案: