Блог

Итак, я делаю вызов 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, но решения похожи на мои, и это все еще не работает. Пожалуйста, помогите мне.

P.S: значение по умолчанию user находится null в редукторе.

РЕДАКТИРОВАТЬ: Создатель действия для загрузки пользователя =>

 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}