我刚刚整理了一些非常基本的 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;
最佳答案
由于 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 },
],
});
}
关于javascript - 这实际上是在改变状态吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47288657/