Question

我刚刚将一些非常基本的React功能放在一起，以显示某人和我的控制台选项卡指责我直接改变状态。我认为只要你使用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;就可以了，你基本上没事。

这一小段代码只是从状态中存储的multer对象中吐出第一个人，然后当你点击按钮时它会增加年龄（实际上这一切都是有效的）。

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

multer-sftp, scp, ssh

Answer 1

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

 increaseAgeHandler = () => {

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

  }

Answer 2

这样做：

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

你想要创建一个年龄变量的新指针，实际上是一个突变，所以你实际上要去做：

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

这并没有改变以前的值并添加一个指向你所在州的新指针，如果你对此有任何疑问，只需拍摄！希望它是可以理解的。

Answer 3

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

这会直接更改age，因为+=是分配运算符。相反，只需在年龄中添加1而不指定：

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

Answer 4

当您调用setState（）时，React会将您提供的对象合并到当前状态

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

this.state它只对构造函数有帮助，然后你可以使用单独的setState（）调用独立更新它们。 不要直接修改状态

例如，这不会重新渲染组件：

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

相反，请使用setState（）：

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

有关React lifecycle

的更多信息

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

4 个答案: