Ionic React中useState的set方法不生效，如何确保状态更新后执行后续操作

问题原因 #

React的setState类方法（包括useState返回的set函数）都是异步批量更新的，你在同一个函数作用域内调用setCoins后，立刻打印当前作用域内的coins变量，拿到的永远是本次渲染闭包缓存的旧值，并不是set方法没有生效。
你的打印日志里coins为0只是因为当前闭包的变量还没更新，组件会在本次函数执行完成后触发重渲染，下一次渲染时coins就会拿到你设置的553了。

解决方案 #

1. 验证状态确实更新 #

在组件根作用域添加打印，即可看到重渲染后的最新值：

const Tab5: React.FC = () => {
  const [coins, setCoins] = useState(0)
  // 新增这行，重渲染时会打印最新值
  console.log('当前组件coins值：', coins)
  // 剩余代码...
}

2. 状态更新完成后执行后续操作的标准方案 #

使用useEffect监听对应state的变化，依赖项数组填入你要监听的状态，回调函数会在状态更新完成、组件重渲染后触发，此时拿到的就是最新的状态值：

const Tab5: React.FC = () => {
  const [coins, setCoins] = useState(0)

  // 监听coins变化，状态更新后自动执行里面的逻辑
  useEffect(() => {
    // 这里写你需要在coins更新后执行的后续操作
    console.log('coins已经更新完成，最新值：', coins)
    // 例：调用后续接口、执行计算逻辑等
  }, [coins]) // 依赖项填coins，只有coins变化时才会触发这个effect

  useIonViewDidEnter(async() => {
    // 原有逻辑不变
    console.log('ionViewDidEnter event fired');
    console.log("user data from firebase is", usrVal)
    if(usrVal === null || usrVal.coins === undefined){
      setCoins(0)
      setDiviCoins(0)
    }else{
      console.log("we are here to set conversion")
      setCoins(+usrVal.coins)
    }
  });
  // 剩余代码...
}

3. 临时使用更新值的简化方案 #

如果你不需要等待组件重渲染，只是要用到即将设置的新值做计算，直接使用你传入set函数的原值即可，不需要从state取：

// 在useIonViewDidEnter的else分支里：
const newCoins = +usrVal.coins
setCoins(newCoins)
// 直接用newCoins做后续计算，不需要等状态更新
console.log("要设置的coins值为：", newCoins)

内容的提问来源于stack exchange，提问作者Moblize IT