React中如何立即更新state？API请求后状态未同步问题

你遇到的核心问题是React状态更新的异步性，再加上axios请求本身也是异步操作——当你调用getInfo(input)后，代码会立刻往下执行，这时候result还是之前的旧值，要么axios请求还没完成，要么setResult的状态更新还没生效，所以那行if (!result || !result?.ok)根本拿不到这次请求的最新结果。

下面给你两种实用的解决思路：

方法一：在请求回调里直接处理结果逻辑 #

既然getInfo是发起请求的入口，我们可以把结果判断、存储更新的逻辑直接放到请求完成的回调里，这样就能确保拿到的是当前请求的最新数据：

修改useGetInfo.tsx中的getInfo函数：

const getInfo = useCallback(async (value: string) => {
  const url = `<URL_FROM_API${value}>`;
  try {
    const response = await axios.get(url);
    const newResult = response.data;
    setResult(newResult);
    
    // 请求成功后直接处理存储逻辑
    if (newResult?.ok) {
      localStorage.setItem('info', value);
      setInfoStorage(value);
    } else {
      localStorage.removeItem('info');
      setInfoStorage(undefined);
    }
  } catch (_) {
    setResult(null);
    // 请求失败时同样清理存储
    localStorage.removeItem('info');
    setInfoStorage(undefined);
  }
}, []);

然后简化SomeComponent.tsx里的handleInfoSubmit，只保留触发请求和清空输入的逻辑：

const handleInfoSubmit = useCallback(() => {
  getInfo(input);
  setInput('');
}, [input, getInfo, setInput]);

这种方式把请求和结果处理逻辑集中在一起，完全避开了状态更新异步的问题，逻辑也更清晰。

方法二：用useEffect监听result的变化 #

如果你不想修改getInfo的原有逻辑，也可以在组件中通过useEffect监听result的更新，等状态真正变化后再执行判断和存储操作：

在SomeComponent.tsx中添加以下代码：

const { setInfoStorage, getInfo, result, infoStorage } = useContext(InfoContext);
const [input, setInput] = useState('');

// 新增useEffect，监听result的变化
useEffect(() => {
  // 加个判断，确保是当前提交的请求结果（避免旧请求干扰）
  if (infoStorage === input) {
    if (!result || !result?.ok) {
      localStorage.removeItem('info');
      setInfoStorage(undefined);
    } else {
      localStorage.setItem('info', input);
      setInfoStorage(input);
    }
  }
}, [result, infoStorage, input, setInfoStorage]);

const handleInfoSubmit = useCallback(() => {
  // 先把当前输入存到infoStorage，标记这是正在处理的请求
  setInfoStorage(input);
  getInfo(input);
  setInput('');
}, [input, getInfo, setInfoStorage, setInput]);

这里的关键是先通过setInfoStorage(input)标记当前正在处理的输入值，避免之前未完成的请求结果回来时干扰当前逻辑。当result更新后，useEffect会自动触发，执行对应的存储操作。

额外提醒 #

你原来的代码里有个小错误：localStorage.setItem('info', 'input')会把字符串'input'存进本地存储，而不是输入框的实际值，应该改成localStorage.setItem('info', input)。

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