javascript - 我在改变对象吗？

Question

我在改变状态对象吗

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 });
};

Answer 1

是也不是。你不是在改变 this.state，而是在改变 this.state 引用的对象。在 React 中你不应该这样做。

should I write something like this?

差不多；因为这涉及基于状态(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 中的显式代码运行之前。)