React useState更新后无法获取新状态值的问题求助

我来帮你理清这个问题～你遇到的核心问题是 useState的更新是异步的，所以在调用setTest之后立刻console.log(test)，拿到的还是更新前的旧值。而你尝试给setTest加第二个回调参数的方法，其实是类组件中setState的用法，函数组件的useState setter并不支持这个参数，所以才会收到警告。

下面给你几个可行的解决方案：

方案1：用useEffect监听状态变化 #

这是最常用的方式，当test状态发生改变时，useEffect会自动执行，此时就能拿到最新的状态值：

import { useState, useEffect } from 'react';

function YourComponent() {
  const [test, setTest] = useState("old val");

  // 监听test的变化，变化时打印新值
  useEffect(() => {
    console.log(test);
  }, [test]); // 依赖数组里放test，只有test变化时才触发

  const run = () => {
    setTest("new val");
  };

  return <button onClick={run}>更新状态</button>;
}

方案2：直接使用新值变量 #

如果你只是想在更新状态的同时使用这个新值，完全不需要等状态更新，直接把新值存在变量里就行：

const [test, setTest] = useState("old val");

const run = () => {
  const newTestValue = "new val";
  setTest(newTestValue);
  console.log(newTestValue); // 直接用这个变量，肯定是最新值
};

方案3：用useRef保存最新状态 #

如果需要在组件的其他地方（比如异步操作里）随时获取最新的状态值，可以用useRef来同步状态：

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

function YourComponent() {
  const [test, setTest] = useState("old val");
  const testRef = useRef(test);

  // 让ref始终同步最新的test状态
  useEffect(() => {
    testRef.current = test;
  }, [test]);

  const run = () => {
    setTest("new val");
    // 如果需要立即获取，可能需要等下一轮渲染（比如用setTimeout）
    setTimeout(() => {
      console.log(testRef.current); // 这里会打印"new val"
    }, 0);
  };

  return <button onClick={run}>更新状态</button>;
}

总结一下：React的useState更新不会同步修改状态变量，所以不能在setter之后立刻读取旧变量。根据你的需求选择上面的方案就可以啦～

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