React Native中useState异步更新导致console.log无法实时显示最新值的问题问询

这问题我刚学React的时候也踩过一模一样的坑！先看你的代码：

function App() { 
  const [counter,setCounter]=useState(0); 
  return ( 
    <View> 
      <Button title="hello" onPress={()=> {setCounter(counter+1);console.log("display counter in console" ,counter)}}> 
      </Button> 
      {counter%2==1 ? <Text> display counter in UI</Text> : null } 
      <View> 
        <Text> thank you for clicking the button </Text> 
      </View> 
    </View> 
  ) 
}

首次点击后控制台输出0，但UI却能正常显示<Text>组件，这看似矛盾，其实完全符合React的状态更新逻辑，下面给你掰明白：

1. 为什么console.log输出旧值？ #

setCounter是异步批量更新的：当你调用它的时候，React不会立刻修改counter的当前值，而是把这个更新请求放进一个队列里，等当前事件循环结束后再统一处理状态更新。

而你在setCounter之后立刻执行的console.log(counter)，读取的是当前函数作用域里的counter——也就是更新前的旧值（0），因为此时状态更新还没真正完成。

2. 为什么UI能正常显示新状态？ #

当React处理完状态更新队列后，会重新渲染App组件。这时候useState会返回更新后的新状态（1），所以重新渲染时counter%2==1的条件成立，对应的<Text>组件就会正常显示出来。

一句话总结：

• console.log是在当前渲染周期执行的，拿的是旧状态
• UI渲染是在下一次渲染周期完成的，用的是新状态

3. 怎么在控制台看到最新的状态值？ #

有两种简单方法解决这个问题：

方法一：用useEffect监听状态变化 #

把console.log放进useEffect里，指定counter为依赖项，这样每次counter更新后都会触发：

import { useState, useEffect } from 'react';

function App() { 
  const [counter,setCounter]=useState(0); 

  useEffect(() => {
    console.log("display updated counter in console", counter);
  }, [counter]); // 只有counter变化时才执行

  return ( 
    // 你的组件内容不变
  ) 
}

方法二：使用函数式更新获取最新状态 #

如果需要在更新状态的同时拿到最新值，可以给setCounter传递一个函数，这个函数会接收当前最新的状态值作为参数：

<Button 
  title="hello" 
  onPress={()=> {
    setCounter(prevCounter => {
      const newCounter = prevCounter + 1;
      console.log("display counter in console", newCounter);
      return newCounter;
    });
  }}
/>

这样就能在控制台实时看到更新后的counter值了~

内容的提问来源于stack exchange，提问作者cold programmmer