我是变异对象吗？

Question

am I mutating state object

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

with this method

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

  this.setState({ selectedHero });
};

should I write something like this?

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

  this.setState({ selectedHero });
};

Answer 1

Yes and no. You're not mutating this.state , but you are mutating an object this.state refers to. Which you shouldn't do in React.

should I write something like this?

Almost ; since that involves updating state based on state (the other properties of selectedHero ), you must use the callback version of setState . Since that means using properties from the synthetic event after handleChange returns, we'll need to grab them up-front:

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

If you don't use the callback version, things will appear to work much of the time, and fail when you have overlapping state updates to selectedHero (remember that state updates are asynchronous); one will stomp on the other.

---

If you like, you can also condense it by using a computed property name after the property spread:

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

and even throw in some parameter destructuring:

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

(Yes, the destructuring will happen before handleChange returns. It happens before your explicit code in handleChange runs at all.)

Answer 2

Yes, you are mutating the selectedHero object. You should do something like this:

handleChange = e => {
  let selectedHero = Object.assign({}, this.state.selectedHero);
  selectedHero[e.target.name] = e.target.value;
  this.setState({ selectedHero });
};

The Object.assign call will create a new object, so that your original selectedHero object is not modified

Edit: Your edited use of the ES2018 spread syntax works too.