Question

我在React中使用useState钩子，它的行为很奇怪。

如果您看下面的示例，这是我所期望的：调用login，成功后调用setRefreshToken(responseToken)，然后调用refresh()，该引用引用了{ {1}}。实际上发生的是refreshToken在setRefreshToken内部未定义。

我知道refreshToken是异步的，但是我之前从未遇到过这样的问题。我想念什么吗？

refresh()

完整示例：https://github.com/analyticsrequired/auth-admin/blob/master/src/AuthContext.js

Answer 1

您是正确的，因为在调用refresh之前不会重新渲染该组件，因此refreshToken中的refresh将是默认组件。

您可以改为将token的{{1}}作为login的参数，并使用它，它将按预期工作。

refresh

Answer 2

只要refresh发生更改，您就可以使用useEffect自动呼叫refreshToken：

...
    if (response.status === 201) {
      const token = await response.text();
      setRefreshToken(token);
      window.localStorage.setItem(localStorageKey, token);

      //await refresh();
    }
...
useEffect(
  () => {
    // your refresh code
  },
  [refreshToken]
)

useEffect中的代码将在第一个渲染器上以及更改refreshToken之后被调用。因此，您无需在每次致电refresh之后致电setRefreshToken。

反应useState钩无法正常工作

2 个答案: