Блог

У меня есть Header компонент, используемый на нескольких страницах React, у props меня есть user.name сохраненный, и он отобразит его, если пользователь войдет в систему. Проблема в том, user.name что он будет существовать только после входа пользователя в систему, и я не могу понять, как справиться с этим до входа пользователя в систему.
Вот некоторая важная часть моего кода:

 class Header extends Component {
    ...

    render() {
        const { isAuthenticated, name } = this.props;
        ...
        return (
            ...
            {isAuthenticated amp;amp; (
                ...
                <sometag>
                    {name}
                </sometag>
                ...
            )}
        )
    }
}

const mapStateToProps = state => ({
    isAuthenticated: state.isAuthenticated,
    name: state.user.name
});
 

Я протестировал его до истечения срока действия кэша входа, все в порядке. Но при повторном входе в систему мой код ломается @:

 name: state.user.name
 

Потому user что еще не существует, поэтому by access user.name фактически получает доступ null.name .

Как я могу это решить? Может быть, что-то вроде if (isAuthenticated) для name части?

Предполагая, что ошибка связана с приведенным ниже фрагментом

 const mapStateToProps = state => ({
    isAuthenticated: state.isAuthenticated,
    name: state.user.name
});
 

вы можете это сделать:

 const mapStateToProps = state => ({
    isAuthenticated: state.isAuthenticated,
    name: state.useramp;amp;state.user.name?state.user.name:""
});