javascript - 我是变异对象吗？

我是在改变状态对象吗

state = {
  selectedHero: { id: "", name: "", saying: "" }
}

用这种方法

handleChange = e => {
  let selectedHero = this.state.selectedHero;
  selectedHero[e.target.name] = e.target.value;

  this.setState({ selectedHero });
};

我应该写这样的东西吗？

handleChange = e => {
  let selectedHero = { ...this.state.selectedHero };
  selectedHero[e.target.name] = e.target.value;

  this.setState({ selectedHero });
};

最佳答案

是的，没有。您不是在变异this.state，而是在变异this.state所指的对象。在React中不应该这样做。


  我应该写这样的东西吗？


几乎;由于这涉及基于状态（selectedHero的其他属性）更新状态，因此您must use the callback version of setState。由于这意味着在handleChange返回之后使用合成事件中的属性，因此我们需要预先获取它们：

handleChange = e => {
  const {name, value } = e.target;
  this.setState(prevState => {
    let selectedHero = { ...prevState.selectedHero };
    selectedHero[name] = value;
    return { selectedHero };
  })
};

如果您不使用回调版本，则大多数情况下似乎会正常工作，并且当selectedHero的状态更新重叠时会失败（请记住状态更新是异步的）。一个会脚另一个。



如果您愿意，还可以通过在属性分布后使用计算的属性名称来压缩它：

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

甚至抛出一些参数解构：

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

（是的，销毁将发生在handleChange返回之前。它发生在handleChange中的显式代码完全运行之前。）