React 覆盖 setState 上的所有状态答案

【问题标题】：React overwrites all states on setStateReact 覆盖 setState 上的所有状态
【发布时间】：2018-05-29 16:50:21
【问题描述】：

我有以下设置：

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

【问题讨论】：

标签： reactjs redux react-redux state

【解决方案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: ''
  }
};

【讨论】：

感谢您的回答，请检查我的帖子的编辑。
@Xeen 尝试将 e.persist() 添加为 yourhandleChange 的第一行。