React Native中useState设置数据更新延迟，跳转页面传参为旧值如何解决

React 中 useState 的状态更新为批量异步执行，调用 setFoto 后不会立即修改当前作用域下的 foto 变量，当前渲染周期内拿到的始终是本次渲染开始时的状态快照，所以同步打印、跳转时拿到的还是初始的 null。

方案1：直接传递参数（最优，适合仅跳转传参场景） #

如果foto状态没有其他UI渲染依赖，不需要存入state后再读取，直接把要设置的值同时用于状态更新和跳转传参即可：

const [foto, setFoto] = useState(null);

const sendQUtest = () => {
  const targetFoto = 'QUtest';
  setFoto(targetFoto);
  console.log('assessment: ' + targetFoto);
  navigator.navigate('pembayaranAssessment', targetFoto);
};

const sendTOPtest = () => {
  const targetFoto = 'TOPtest';
  setFoto(targetFoto);
  console.log('assessment: ' + targetFoto);
  navigator.navigate('pembayaranAssessment', targetFoto);
};

该方案无异步等待问题，性能最优，逻辑最简洁。

方案2：useEffect监听状态更新（适合必须等状态更新后再执行操作的场景） #

如果确实需要等foto状态更新为最新值后再执行跳转、打印等操作，可以新增触发标识配合useEffect实现：

const [foto, setFoto] = useState(null);
// 新增标识判断是否为点击触发的更新，避免首次渲染自动跳转
const [shouldNavigate, setShouldNavigate] = useState(false);

const sendQUtest = () => {
  setFoto('QUtest');
  setShouldNavigate(true);
};

const sendTOPtest = () => {
  setFoto('TOPtest');
  setShouldNavigate(true);
};

// 监听foto和触发标识的变化
useEffect(() => {
  if (shouldNavigate && foto !== null) {
    console.log('assessment: ' + foto);
    navigator.navigate('pembayaranAssessment', foto);
    // 跳转后重置标识，避免后续状态变化重复触发跳转
    setShouldNavigate(false);
  }
}, [foto, shouldNavigate, navigator]);

方案3：使用flushSync同步更新状态（React 18+ 适用） #

如果需要强制让状态更新同步生效，可以引入flushSync包裹状态更新操作，更新后即可立即拿到最新状态值：

import { flushSync } from 'react-dom'; // React Native同样支持引入

const [foto, setFoto] = useState(null);

const sendQUtest = () => {
  flushSync(() => {
    setFoto('QUtest');
  });
  // 此处已可拿到更新后的foto值
  console.log('assessment: ' + foto);
  navigator.navigate('pembayaranAssessment', foto);
};

const sendTOPtest = () => {
  flushSync(() => {
    setFoto('TOPtest');
  });
  console.log('assessment: ' + foto);
  navigator.navigate('pembayaranAssessment', foto);
};

注意：flushSync会打断React的批量更新优化，可能导致性能损耗，非必要不推荐使用

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