react浅比较

问题描述：做h5项目时，点击领取按钮后，会立即更新页面信息，但是确点击了两次才成功领取，更新数据信息

state={
getInfo:{},
getReward:{}
}
async componentDidMount(){
this.getInfo()
}
getInfo=async()=>{
const res=await ajax.post("/xxx/xxx/info")
if(!res===200) return
this.setState({
//info:res.data  导致点击两次才会数据更新
info:JSON.parse(JSON.stringify(res.data)) //这样就可以了
})
getReward=async()=>{
const res=await ajax.post("/xxx/xxx/reward")
if(!res===200) return
this.setState({
reward:res.data
},
()=>{
this.getInfo()
}
)
toast("领取成功")
}
render(){
return(
<div>
<span>{info.num}</span>
<button onClick={this.getReward}></button>
</div>
)
}