setState
大家应该都知道setState用于修改类组件里的数据状态,但setState的坑也挺深,接下来通过案列讲解。
1. setState异步执行,在回调才能拿到最新值
class App extends React.Component{
constructor(props){
super(props)
this.state={
n:1
}
componentDidMount(){
this.setState({
n:2
},()=>{
console.log(this.state.n)//在回调里才能拿到最新值
})
}
render(){
return (<div>App</div>)
}
}
2. 连续执行多个对象会合并(覆盖),只会执行最后一个 this.setState( )
class App extends React.Component{
constructor(props){
super(props)
this.state={
n:1
}
}
componentDidMount(){
this.setState({
n:this.state.n+1
})
this.setState({
n:this.state.n+1
})
this.setState({
n:this.state.n+1
})
}
render(){
return (<div>App</div>)
}
}
代码只会执行最后一个setState(),执行后最新值为n=2
解决方法:
把上面代码所有的setState换成下面代码就oK了
this.setState((preState,props)=>{
return {
n:preState.n+1
}
})