React解决setState异步处理数据带来的问题 或 写一个同步响应式修改数据的全局函数

首先 可能很多人还不知道一个点 react更改数据的setState是异步处理数据的

我们来看一个组件案例

import './App.css';
import React from "react";

class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      numericalValue: 1
    }
  }
  increase(){
    this.setState({
      numericalValue: this.state.numericalValue+1
    })
    console.log(this.state.numericalValue);
  }
  render(){
    return (
      <div className="App">
        <span>{ this.state.numericalValue }</span>
        <button onClick = { this.increase.bind(this) }>增加</button>
      </div>
    )
  }
}

export default App;

这里 我们在页面输出了 state下的numericalValue 属性值 然后我们的增加按键 绑定了一个事件
他会将numericalValue加一 然后输出

我们来运行这个项目

然后我们点击一下这个增加按钮

然后我们再点一下

大家或许会发现 我们控制台输出的永远慢一步
这是为什么呢？ 我们的输出变量也是写在setState更改数据后面的
那无疑是因为 setState 是异步修改数据的 那如果我们想改完直接拿来用 这个时候数据就有问题了 因为你用的时候 可能他还没改完

这个就不用慌
setState有提供给我们一个回调函数
我们将 increase的代码改成

increase(){
  this.setState({
    numericalValue: this.state.numericalValue+1
  },()=>{
    console.log(this.state.numericalValue);
  })
}

然后我们在运行代码

然后我们点一下增加按钮

再点一下

这样就没有任何问题了

当然 可能也有人觉得 这样还是不舒服

我们可以通过Promise 加 async和await 写一个同步的动态更改数据方法
我们先声明一个函数 参考代码如下

setData(state){
   return new Promise((resolve) =>{
      this.setState(state,resolve);
    })
}

然后我们之后想用setState更改数据就可以调用这个setData了
例如我们这里的increase就可以改成

async increase(){
 await this.setData({
   numericalValue: this.state.numericalValue+1
 })
 console.log(this.state.numericalValue);
}

再运行项目 他也就是同步的了