使用 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”（如果鈎子的第二個參數為空）。