这实际上是在改变国家吗？

Question

I've just put together a really basic bit of React functionality to show someone and my console tab is accusing me of mutating the state directly. I thought that as long as you're using this.setState() that you're basically fine.

This little bit of code just spits out the first person from the person object stored in the state and then when you click the button it increments the age (this actually all works, incidentally).

Am I actually directly mutating the state by doing this? And if I am, what is the correct way of doing this?

import React, { Component } from 'react';
import './App.css';
import Person from './Person/Person';

class App extends Component {
  state = {
    persons: [
      { name: 'Max', age: 28 },
      { name: 'Stephanie', age: 26 },
      { name: 'Manu', age: 29 },
    ],
  }

  increaseAgeHandler = () => {
    this.setState({
      persons: [
        { name: 'Max', age: this.state.persons[0].age += 1 },
        { name: 'Stephanie', age: 26 },
        { name: 'Manu', age: 29 },
      ],
    });
  }

  render() {
    return (
      <div className="App">
        <h1>This is an app</h1>
        <button onClick={this.increaseAgeHandler}>Add to age</button>
        <Person name={this.state.persons[0].name} age={this.state.persons[0].age} />
      </div>
    );
  }
}

export default App;

Answer 1

As setState is asynchronous to increase the age by one it is advisable to pass the prevState as an argument to the setState callback function as below. Also there is no mutation of state if you add 1 to the previous state as below:

 increaseAgeHandler = () => {

    this.setState(prevState => {
      persons: [
        { name: 'Max', age: prevState.persons[0].age + 1 },
        { name: 'Stephanie', age: 26 },
        { name: 'Manu', age: 29 },
      ],
    });

  }

Answer 2

So doing:

this.state.persons[0].age += 1

Is acutally a mutation you want to create a new pointer for the age variable so you're actually going to do:

this.state.persons[0].age + 1

This doesn't mutate previous value and adds a new pointer to your state, if you have any questions about this, just shoot! Hope it's understandable.

Answer 3

this.state.persons[0].age += 1

This changes the age directly because += is an assignment operator . Instead, just add 1 to the age without assigning:

this.state.persons[0].age + 1

Answer 4

When you call setState(), React merges the object you provide into the current state

constructor(props) {
    super(props);
    this.state = {
      persons: [
       { name: 'Max', age: 28 },
       { name: 'Stephanie', age: 26 },
       { name: 'Manu', age: 29 },
      ]
    };
  }

this.state it's only assinable on the constructor, then you can update them independently with separate setState() calls. Do Not Modify State Directly

For example, this will not re-render a component:

this.state.persons[0].age += 1

Instead, use setState():

increaseAgeHandler = () => {
    this.setState({
      persons: [
        { name: 'Max', age: this.state.persons[0].age += 1 },
        { name: 'Stephanie', age: 26 },
        { name: 'Manu', age: 29 },
      ],
    });
  }

More info about React lifecycle