1、react 解决this.setState修改数据异步问题
解决异步：
1、nextState（推荐）
import React from 'react'
class Home extends React.Component{
constructor(props){
super(props);
this.state = {
data :0
}
}
componentDidMount(){
this.timer = setInterval(()=>{this.setState({date:new Date()})},1000)
}
componentWillMount(){
clearInterval(this.timer)
}
render(){
return(
<React.Fragment>
<p>{this.state.data}</p>
<button onClick={this.add}>点击</button>
</React.Fragment>
)
}
// 异步问题复现
// add = ()=>{
// this.setState({
// data:this.state.data+1
// })
// this.setState({
// data:this.state.data+2
// })
// console.log(`点击${this.state.data}`);
// }
// 解决方法一
add = ()=>{
this.setState(nextState=>({data:nextState.data+1}))
this.setState(nextState=>({data:nextState.data+2}))
console.log(`点击${this.state.data}`)
}
//方法二setTimeout()：
add = ()=>{
setTimeout(()=>{
this.setState({data:this.state.data+1})
this.setState({data:this.state.data+2})
},0)
}
//方法三事件委托：
componentDidMount(){
this.timer = setInterval(()=>{this.setState({date:new Date()})},1000);
document.getElementsByTagName("button")[0].addEventListener('click',
()=>{
this.setState({
data:this.state.data+1
})
console.log(`点击${this.state.data}`)
})
}
export default Home;
