javascript - 这实际上是在改变状态吗？

Question

我刚刚整理了一些非常基本的 React 功能来向某人展示，我的控制台选项卡指责我直接改变状态。我认为只要您使用 this.setState() 就基本上没问题。

这段代码只是从存储在状态中的 person 对象中吐出第一个人，然后当您单击该按钮时它会增加年龄(顺便说一句，这实际上都有效)。

我这样做实际上是在直接改变状态吗？如果是，正确的做法是什么？

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

由于 setState 是异步的，可以将年龄增加一倍，因此建议将 prevState 作为参数传递给 setState 回调函数，如下所示以下。如果您将 1 添加到先前的状态，也没有状态突变，如下所示:

 increaseAgeHandler = () => {

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

  }