SignalR connection.start().then() 无法按预期工作

Question

假设在我的reactJS客户端中，我创建了一个像这样的信号集线器连接：

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

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

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

    </div>
  );
}

我的 Login.js 组件（我缩短了它）：

const Login = ({ createConn }) => {
    const handleSubmit = (e) => {
        e.preventDefault();
        createConn();
return (
            <Form onSubmit={handleSubmit} className='mt-5'>
                <Form.Group>
                    <Form.Control placeholder='Email...' type='text' className='d-flex p-2' onChange={changeHanler} />
                    <Button variant='success' type='submit' >Join</Button>
                </Form.Group>
            </Form>
        </div>
    )
}

结果是“连接为空”。 很明显这里出了问题。当承诺完成时，then() 中的函数将被调用，因此连接必须已经建立，然后 setConnection() 被调用，但正如你所看到的，我的状态连接为空。并且没有记录任何异常。 那么发生了什么？或者也许是因为我对 Promise 的理解不正确？如果是的话，有人可以纠正我吗？

Answer 1

执行完

setConnection(conn)

后，

connection

仍然是旧值。

setConnection(conn)

的执行不会立即改变

connection

，而只是“安排”下一次渲染的

connection

的更新。

setConnection(conn)

也会导致组件重新渲染，即函数

App()

再次执行，但只有在所有其他“立即”js代码完成执行之后。

所以在

then

块内，

connection

仍然是旧值，当下次执行

App()

时，再次调用

const [ connection, ...

，这（当然）是一个新的独立变量（应该具有预期值，但对于您的

then

块来说为时已晚）。

所以也许你的

connection

变量按预期工作，但只是还没有在

then

块内 （这取决于你最终如何使用

connection

，这不是问题的一部分）.

React 的工作方式更多“声明性”，更少“命令性”，也就是说，你基本上不应该期望“B 在 A 之后发生”，而是要了解 React 所做的保证，并声明不同状态之间的依赖关系。