Блог

Я сохраняю некоторые keys в sessionStorage , они keys являются ответом на запрос входа в систему. Как только вход в систему завершен, в componentDidMount() я выполняю вызов API для получения информации о пользователе. Я создал api.js файл с базовым URL и заголовком, этот заголовок используется sessionStorage.getItem("keys") для выполнения дальнейших пользовательских вызовов API.

Проблема в том, что когда страница загружается в первый раз, заголовки имеют значение null, и мне приходится снова обновлять, чтобы получить заголовок keys .

Я отложил процесс, используя settimeout но, тем не менее, заголовок впервые имеет значение null.

Будет ли что-то подобное работать для вас?

 const apijs = React.lazy(() => import('api.js'));
  

Это загрузит файл только при доступе apijs

Вы можете сделать что-то вроде этого.

 <div >
  <span>Hello {user?.email}</span>
</div>
  

Если пользователь ничего не зарегистрировал, в заголовке пользователь просто увидит Hello.

 
const [keys, setKeys] = useState('')

useEffect(()=>{
  const userLogin = () {
    // login
    const { data } = fetch('api')
    const { keys } = data
    sessionStorage.setItem("keys",keys)
    setKeys(keys)
    // so something
  }
},[])

useEffect(()=>{
  if(!keys) return
  const getUserInfo = () => {
     // call api to get user info
  }
  getUserInfo()
},[keys])