React Native中setState不更新变量？页面聚焦状态更新异常

问题核心是React的useState更新是异步操作——调用setKey后，key变量不会立刻更新为新值，所以当下一行console.log(key)时，输出的还是更新前的旧值；而route.params?.key是直接读取的路由参数，自然是最新的。

解决办法： #

1. 直接使用路由参数打印新值
   如果只是想确认新值是否正确，可以把路由参数存到临时变量里，直接打印这个变量：

useFocusEffect(
    React.useCallback(() => {
      if (route.params?.key !== null) {
        const newKey = route.params?.key;
        const newDate = route.params?.date;
        setKey(newKey);
        console.log(newKey); // 这里输出最新值
        console.log(key); // 这里仍是旧值，属于正常异步更新现象
        setLastTokenDate(newDate);
      }
      
    }, [route.params?.key, route.params?.date]), // 注意修正依赖数组的笔误（原代码里的chiave/data应该是key/date）
);

2. 用useEffect监听状态变化
   如果需要在key真正更新后执行后续逻辑（比如打印、调用接口等），可以单独加一个useEffect监听key的变化：

const [key, setKey] = useState('');
const [lastTokenDate, setLastTokenDate] = useState('');

useFocusEffect(
    React.useCallback(() => {
      if (route.params?.key !== null) {
        setKey(route.params?.key);
        setLastTokenDate(route.params?.date);
      }
      
    }, [route.params?.key, route.params?.date]),
);

// 当key更新完成后触发
useEffect(() => {
  console.log('更新后的key:', key);
  // 这里可以写key更新后的其他逻辑
}, [key]);

另外注意你的依赖数组里写的是route.params?.chiave和route.params?.data，但代码里用的是route.params?.key和route.params?.date，这属于笔误，会导致useCallback无法正确触发更新，一定要修正成和代码中使用的参数一致。

内容的提问来源于stack exchange，提问作者Alessio Catrini