React Native中useState更新后同一函数无法获取新值的原因及解决方法

为什么会出现这种情况？ #

React的useState状态更新是异步批量处理的，而且函数组件的状态变量基于闭包存在。

当你在myFunction里调用setValue(2)时，只是告诉React需要更新状态，但React不会立刻修改当前闭包里的value变量——当前函数执行时，value还是初始的1，因为组件还没触发重新渲染。只有等React完成状态更新、组件重新渲染后，才会生成新的闭包，此时新的value（也就是2）才会生效。

组件外部的console.log(value)会在每次组件渲染时执行，所以状态更新完成、组件重新渲染后，这里自然能拿到最新的2。

怎么在同一函数里获取更新后的状态值？ #

根据需求，有几种可行方案：

1. 直接使用你设置的新值（最简单）

如果是像示例里直接设置固定值2，同一函数里完全可以直接用这个值，没必要从状态变量取：

const myFunction = () => {
  const newValue = 2;
  setValue(newValue);
  console.log(newValue); // 输出2
};

2. 使用useEffect监听状态变化

如果需要在状态更新后执行依赖最新状态的逻辑，可以用useEffect，把value加入依赖数组，每次value变化时都会触发：

import { useState, useEffect } from 'react';

export default function App() {
  const [value, setValue] = useState(1);

  const myFunction = () => {
    setValue(2);
  };

  useEffect(() => {
    console.log(value); // value更新为2时，这里输出2
  }, [value]);

  return (...);
}

3. 使用useRef保存最新状态

useRef的.current属性是可变的，不受闭包限制，能始终拿到最新状态值。可以在状态更新时同步更新ref：

import { useState, useRef, useEffect } from 'react';

export default function App() {
  const [value, setValue] = useState(1);
  const valueRef = useRef(value);

  // 同步状态到ref
  useEffect(() => {
    valueRef.current = value;
  }, [value]);

  const myFunction = () => {
    setValue(2);
    // 利用微任务等待状态更新完成
    setTimeout(() => {
      console.log(valueRef.current); // 输出2
    }, 0);
  };

  return (...);
}

4. 函数式更新（适用于基于旧状态计算新值的场景）

如果新状态是基于旧状态计算的（比如累加），可以在函数式更新里直接获取最新的旧状态：

const myFunction = () => {
  setValue(prevValue => {
    const newValue = prevValue + 1;
    console.log(newValue); // 这里能拿到更新后的值
    return newValue;
  });
};

内容的提问来源于stack exchange，提问作者Muhammad Yasir