javascript - 在 API 调用之前进行 React 渲染
问题描述
所以我对服务器进行 API 调用以获取 currentUser,
useEffect(() => {
loadUser()
},[])
由于 React 的行为类似于render first run lifecycle methods second
,起初,我的用户选择器返回 null ,这是我所期望的。
但是我仍然有user is null
错误,所以这是我的代码 =>
const isAuthenticated = useSelector(state => state.auth.isAuthenticated)
const user = useSelector(state => state.auth.user)
const authLinks = (
<nav className="auth-navbar">
<div className="auth-navbar__dropdown">
<button type="button" className="dropdown-btn" onClick={dropdown}><img src={profilephoto}></img></button>
<div className="dropdown-menu">
<Link to={`u/${user.username}`} className="dropdown-link">Profile</Link>
<Link to="/settings" className="dropdown-link">Settings</Link>
<Link to="/" onClick={onClickHandler} className="dropdown-link">Logout</Link>
</div>
</div>
</nav>
)
if (user) {
return (
<header className="header">
<Link to="/" className="logo" >
<img src={logo} alt="logo"/>
</Link>
{isAuthenticated ? authLinks : guestLinks}
</header>
)
} else {
return <p>loading..</p>
}
之前在 stackoverflow 上已经提出过这样的问题,但解决方案与我的类似,但它仍然不起作用。请帮我。
PS:默认user
是null
在reducer中。
编辑:加载用户的动作创建者 =>
export const loadUser = () => (dispatch) => {
dispatch({ type: USER_LOADING })
const config = {
withCredentials: true
}
axios.get('http://127.0.0.1:8000/auth/user/', config)
.then(res => {
dispatch({
type: USER_LOADED,
payload: res.data
})
}).catch(err => {
console.log(err)
dispatch({
type: AUTH_ERROR
})
})
}
通常用户加载没有错误=>
减速机 =>
const initialState = {
isAuthenticated: false,
isLoading: false,
user: null,
}
export default function(state=initialState, action){
switch(action.type){
case USER_LOADING:
return {
...state,
isLoading: true
}
case USER_LOADED:
return {
...state,
isAuthenticated: true,
isLoading: false,
user: action.payload
}
解决方案
我认为您需要创建一个仅在存在authLinks
时才执行并返回相关 JSX 的函数。实际上,变量将在初始化之前user
尝试访问该属性。user.username
const authLinks = () => (
...
);
然后在返回中调用它。
{isAuthenticated ? authLinks() : guestLinks}
推荐阅读
- google-apps-script - 通过使用应用程序脚本在电子邮件中包含表单选项通过电子邮件发送 Google 表单
- html - 双滚动捕捉镀铬错误
- sql - 连接 2 个未连接的表,但通过多对多关系连接到同一个表
- javascript - 配置列表表单以根据 Sharepoint Online 中的 CurrentUser.email 值隐藏列
- r - 绘制神经网络的结构
- django - 如何在代码块之后插入段落
在夏日笔记中
- python - 我不知道什么时候必须使用 centerx 和 centry
- swift - 将 didSet 与元组一起使用?
- php - 如何在我的服务器上为 sagepay 安装 SSL 证书?
- sql - 从该 ID 的状态为 1 的表中获取 distict ID