React useState setter调用后状态未即时更新问题求助

为什么会出现这个现象？ #

你说得没错，useState的更新确实是异步的，但这里还有个更关键的核心点：函数组件里的状态变量是「渲染快照」。

在你点击按钮触发clickHandler的时候，当前的username是这一次渲染周期里的固定值——也就是"Default"。调用setUsername(newUsername)只是告诉React：「我要更新状态，请在下一次渲染的时候用新值」，但它不会立刻修改当前作用域里的username变量。哪怕你用async/await也没用，因为setUsername根本不返回Promise，await它完全起不到等待更新的作用。

所以你看到的控制台输出，第一个是从ref里拿到的新输入值"Joe"，第二个还是当前渲染周期里的旧状态"Default"，这完全符合React的设计逻辑。

怎么解决这个问题？ #

根据你的需求，有几种不同的处理方式：

1. 直接使用已获取的新值

如果你只是想在更新状态后立刻使用这个新值，没必要等状态更新——你已经从inputRef.current.value拿到了newUsername，直接用它就行：

function clickHandler() { 
  const newUsername = inputRef.current.value; 
  console.log(newUsername); // 输出"Joe"
  setUsername(newUsername); 
  console.log(newUsername); // 直接用这个变量，同样输出"Joe"
} 

2. 用useEffect监听状态变化

如果你需要在状态真正更新完成后执行逻辑（比如依赖新状态的操作），可以用useEffect监听username的变化：

export function ChangeUsername() { 
  const inputRef = React.useRef(); 
  const [username, setUsername] = React.useState("Default"); 

  // 监听username变化，状态更新后会触发这里
  React.useEffect(() => {
    console.log("更新后的username:", username);
  }, [username]);

  function clickHandler() { 
    const newUsername = inputRef.current.value; 
    console.log(newUsername); 
    setUsername(newUsername); 
  } 

  return ( 
    <div> 
      <button onClick={clickHandler}>Change Username</button> 
      <input type="text" ref={inputRef} /> 
      <Username value={username} /> 
    </div> 
  ); 
}

点击按钮后，控制台会先打印"Joe"，然后useEffect触发，打印"更新后的username: Joe"。

3. 用useRef保存最新状态（特殊场景）

如果有特殊需求，需要在任意时刻获取最新的状态值（而不是渲染快照），可以用useRef来同步保存：

export function ChangeUsername() { 
  const inputRef = React.useRef(); 
  const [username, setUsername] = React.useState("Default"); 
  const latestUsernameRef = React.useRef(username);

  // 每次状态更新，同步更新ref的值
  React.useEffect(() => {
    latestUsernameRef.current = username;
  }, [username]);

  function clickHandler() { 
    const newUsername = inputRef.current.value; 
    console.log(newUsername); 
    setUsername(newUsername); 
    // 这里立刻访问ref，还是旧值，因为状态还没更新
    // 如果要等更新，可以结合useEffect或者用setTimeout（不推荐）
    setTimeout(() => {
      console.log("最新的username:", latestUsernameRef.current);
    }, 0);
  } 

  return ( 
    <div> 
      <button onClick={clickHandler}>Change Username</button> 
      <input type="text" ref={inputRef} /> 
      <Username value={username} /> 
    </div> 
  ); 
}

不过这种方式一般只在特殊场景下使用，大部分情况用前两种方法就足够了。

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