React函数组件中点击事件setTimeout内setState不更新视图问题

核心问题 #

你的代码存在两个关键错误：

1. 函数组件误用this：函数组件中不存在this上下文，this.setUserId会直接报错，导致无法将状态改回FIRST。
2. 闭包状态捕获问题：setTimeout的回调会捕获点击时刻的user_id值（即SECOND），即便之后状态理论上更新，回调里拿到的依然是旧值。

修复方案（简洁版） #

直接修正this的使用，并通过函数式更新确保拿到最新状态：

import React, { useState } from "react";

const TimedButton = (props) => {
  const [user_id, setUserId] = useState("FIRST");

  const handleClick = (event) => {
    setUserId("SECOND");

    setTimeout(() => {
      console.log("Trigger...");
      // 函数式更新：直接获取最新状态并修改
      setUserId(() => {
        console.log("当前最新状态：", user_id);
        return "FIRST";
      });
    }, 1000); 
  };

  return (
    <div>
      <button onClick={handleClick}>
        {user_id}
      </button>
    </div>
  );
};

export default TimedButton;

方案说明 #

• 去掉this，直接调用setUserId：函数组件的状态更新函数无需通过this访问。
• 使用setUserId(prevState => ...)的函数式更新：这种方式会自动传入当前最新的状态值，彻底避开闭包带来的旧值捕获问题，确保状态修改逻辑始终基于最新数据。

可选进阶方案（需访问最新状态时） #

如果需要在setTimeout回调中主动访问最新状态值，可以用useRef同步状态：

import React, { useState, useRef, useEffect } from "react";

const TimedButton = (props) => {
  const [user_id, setUserId] = useState("FIRST");
  const userIdRef = useRef(user_id);

  // 同步状态与ref，确保ref始终保存最新值
  useEffect(() => {
    userIdRef.current = user_id;
  }, [user_id]);

  const handleClick = (event) => {
    setUserId("SECOND");

    setTimeout(() => {
      console.log("Trigger...");
      console.log("当前最新状态：", userIdRef.current);
      setUserId("FIRST");
    }, 1000); 
  };

  return (
    <div>
      <button onClick={handleClick}>
        {user_id}
      </button>
    </div>
  );
};

export default TimedButton;

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