React Native setState未更新问题：寻求替代解决方案

除了flushSync和监听state的useEffect，还有这些实用方案：

1. 利用setState的回调函数 #

React的setState支持第二个参数——回调函数，它会在状态更新完成并触发组件重新渲染后执行。直接在这里写跳转逻辑，就能确保拿到最新的state值：

import { useState, useNavigate } from 'react-router-dom';

function MyComponent() {
  const [userData, setUserData] = useState({});
  const navigate = useNavigate();

  const handleSubmit = () => {
    const updatedData = { name: 'John', age: 30 };
    // 状态更新完成后执行跳转
    setUserData(updatedData, () => {
      navigate('/profile');
    });
  };

  return <button onClick={handleSubmit}>提交并跳转</button>;
}

2. 直接传递最新值到路由（无需依赖state更新） #

如果跳转后需要用到这个状态值，没必要等state异步更新，直接把最新的数值作为路由参数/state传递过去：

const handleNavigate = () => {
  const newValue = 'latest-value';
  setUserData(newValue); // 正常更新state用于当前组件渲染
  // 跳转时直接传最新值，不用等state更新
  navigate('/target-page', { state: { value: newValue } });
};

在目标页面可以通过useLocation()获取这个值：

import { useLocation } from 'react-router-dom';

function TargetPage() {
  const location = useLocation();
  const latestValue = location.state?.value;
  return <div>{latestValue}</div>;
}

3. 使用useReducer管理复杂状态（适合多状态联动场景） #

如果你的状态逻辑涉及多个变量或复杂操作，用useReducer替代useState更清晰。配合useEffect监听reducer返回的状态变化执行跳转（虽用到useEffect，但适配复杂业务场景）：

import { useReducer, useNavigate, useEffect } from 'react-router-dom';

const initialState = { formData: {}, isSubmitted: false };

function formReducer(state, action) {
  switch (action.type) {
    case 'SUBMIT_FORM':
      return {
        ...state,
        formData: action.payload,
        isSubmitted: true
      };
    default:
      return state;
  }
}

function FormComponent() {
  const [state, dispatch] = useReducer(formReducer, initialState);
  const navigate = useNavigate();

  useEffect(() => {
    if (state.isSubmitted) {
      navigate('/success');
    }
  }, [state.isSubmitted, navigate]);

  const handleSubmit = () => {
    const formData = { email: 'test@example.com' };
    dispatch({ type: 'SUBMIT_FORM', payload: formData });
  };

  return <button onClick={handleSubmit}>提交表单</button>;
}

4. 用useRef同步最新状态值 #

把状态同时存在useRef中，ref的更新是同步的，跳转时直接用ref的当前值，无需等待state的异步更新：

import { useState, useRef, useNavigate } from 'react-router-dom';

function MyComponent() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);
  const navigate = useNavigate();

  const handleIncrementAndNavigate = () => {
    const newCount = count + 1;
    countRef.current = newCount; // 同步更新ref
    setCount(newCount);
    // 这里直接用ref的最新值，不用等state更新
    navigate(`/count-page?count=${countRef.current}`);
  };

  return <button onClick={handleIncrementAndNavigate}>+1并跳转</button>;
}

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