使用 react/nextjs 中本地存储的参数初始化组件

Question

我有一个由外部库提供的组件，我需要提供一个访问令牌。 此访问令牌此时保存在 localStorage 中，我想读取它并将其传递给组件。 这是我使用useEffect的尝试，但失败并出现错误{code: "initialization-error", error: "Access token required"}

const test: NextPage = () => {
  const router = useRouter()
  let accessToken = ''
  useEffect(() => {
    const at = localStorage.getItem('accessToken')
    console.log(at) // prints out the correct access token
    if (at !== null) {
      accessToken = at
    }
  }, [])

  return (
      <WebSdk
        accessToken={accessToken}
        expirationHandler={() => Promise.resolve(accessToken)}
        onError={(error) => {
          console.log(error)
        }}
      />
  )
}

export default test

我猜 useEffect 钩子在组件渲染之后运行——如何在组件渲染之前或渲染时从本地存储中读取？

Answer 1

由于您使用的是 nextjs，因此您不能直接调用 localStorage，因此您必须检查 bowser 是否已“初始化”，如下所示：

const test: NextPage = () => {
  const router = useRouter()
  const [initialized, setInitialized] = useState(false);
  const [accessToken, setAccessToken] = useState('');

  useEffect(() => {
    const at = localStorage.getItem('accessToken') || '';
    
    setInitialized(true);
    setAccessToken(at);
  }, [])
 
  if (!initialized) {
    return null;
  }  

  return (
      <WebSdk
        accessToken={accessToken}
        expirationHandler={() => Promise.resolve(accessToken)}
        onError={(error) => {
          console.log(error)
        }}
      />
  )
}

export default test

我猜 useEffect 钩子在组件渲染后运行

是的，组件将在触发钩子之前首先呈现，这相当于早期版本的 react 中的“componentDidMount”（如果钩子的第二个参数为空）。