如何在React中延迟文件导入

Question

我在sessionStorage中存储了一些keys，这些keys是登录请求的响应。登录完成后，在componentDidMount()中，我将调用API来获取用户信息。我已经创建了带有基本URL和头的api.js文件，这个头使用sessionStorage.getItem("keys")进行进一步的用户特定的API调用。

问题是，当页面第一次加载时，标头为空，我必须再次刷新才能获得标头keys。

我已经使用settimeout延迟了进程，但仍然是头一次为空。

Answer 1

这样的东西适合你吗？

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

这将仅在您访问apijs时加载文件

Answer 2

您可以制作这样的东西。

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

如果用户没有注册任何内容，那么在头中用户只会看到Hello。

Answer 3

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])