解决异步：
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;