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

Question

I have a component provided by an external library which I need to provide an access token to. This access token is saved in localStorage at this point and I would like to read it and pass it to the component. This is my attempt using useEffect but this fails with the error {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

I'm guessing the useEffect hook runs after the component renderes - how can I read from local storage before or as the component renders?

Answer 1

Since you are using nextjs you can't call the localStorage directly, so you have to check if the bowser has "initialized", something like this:

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

I'm guessing the useEffect hook runs after the component renderes

Yes the component will render first before the hooks can be triggered, this is the equivalent of "componentDidMount" (if the hook's second parameter is empty) in early verions of react.