React中SignalR connection.start().then()执行后state仍为null问题排查

核心问题和Promise逻辑无关，根源是React useState的异步更新机制与闭包捕获旧值的特性：

1. useState更新是异步的
   调用setConnection(conn)后，React不会立刻修改connection这个state变量，而是将更新任务加入队列，等待下一次组件渲染时才会完成state更新。

2. 闭包捕获了旧的state值
   then回调函数里的connection变量，是被当前函数闭包捕获的初始值（也就是useState声明的默认undefined/null）。哪怕setConnection已经调用，当前闭包里的connection依然是旧值，所以判断connection == null必然为true，会打印日志。

修正方案 #

方案1：直接使用已创建的conn变量判断

既然已经走到then回调，说明conn.start()成功，conn本身是有效连接，不需要依赖state变量判断：

const createConn = async (navigateFunc) => {
  const conn = new HubConnectionBuilder()
    .withUrl('https://localhost:7028/chat')
    .configureLogging(LogLevel.Information)
    .build();
  try {
    await conn.start();
    setConnection(conn);
    // 直接用conn判断，而非state里的connection
    if (conn) {
      console.log("连接已建立");
    }
  } catch (err) {
    console.log(err);
  }
}

方案2：用useEffect监听state更新

如果需要确认state更新后的状态，可以通过useEffect监听connection的变化：

function App() {
  const [connection, setConnection] = useState();

  // 监听connection state的变化
  useEffect(() => {
    if (connection) {
      console.log("连接状态已更新：连接成功");
    } else if (connection !== undefined) {
      console.log("连接状态已更新：连接为null");
    }
  }, [connection]);

  const createConn = async (navigateFunc) => {
    const conn = new HubConnectionBuilder()
      .withUrl('https://localhost:7028/chat')
      .configureLogging(LogLevel.Information)
      .build();
    try {
      await conn.start();
      setConnection(conn);
    } catch (err) {
      console.log(err);
    }
  }

  return (
    <div className="App">
      <Routes>
        <Route path='/' element={<Login createConn={createConn}/>}></Route>
      </Routes>
    </div>
  );
}

额外优化：处理async函数的调用

Login组件中调用createConn时，建议加上await，避免异步逻辑未完成时的潜在问题：

const handleSubmit = async (e) => {
  e.preventDefault();
  await createConn();
}

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