Как получить доступ к состоянию с компонентом более высокого порядка
Я хочу создать компонент более высокого порядка, который проверяет, вошел ли пользователь в систему. Если они есть, я показываю компонент, если нет, я хочу перенаправить их на страницу входа.
может кто-нибудь объяснить, что я здесь делаю не так?
Вот HOC:
import React from 'react';
import { connect } from 'react-redux';
const withAuthentication = (Component) => {
class WithAuthentication extends React.Component {
componentDidMount() {
console.info(this.props.sessionId);
}
render() {
return this.props.sessionId ? <Component {...this.props} /> : null;
}
}
const mapStateToProps = (state) => ({
sessionId: state.auth.userInfo.authUserInfo.sessionId
})
return connect(mapStateToProps, null)(WithAuthentication);
}
export default withAuthentication;
тогда я называю это так:
....
import withAuthentication from './containers/withAuthentication';
const Hello = () => <h1> Hello</h1>;
....
<Route path = "/" component = { withAuthentication(Hello) }/>
Я удалил больше кода, который, как мне кажется, не имеет отношения к этому ...
TIA за вашу помощь!
Обновление: код, вызывающий проблему, выглядит следующим образом:
const mapStateToProps = (state) => ({
sessionId: state.auth.userInfo.authUserInfo.sessionId
})
Ошибка: TypeError: Cannot read property 'sessionId' of undefined
Возникающая ошибка: TypeError: Cannot read property 'sessionId' of undefined указывает на этот блок кода: const mapStateToProps = (state) => ({ > 16 | sessionId: state.auth.userInfo.authUserInfo.sessionId 17 | }).
Ваше состояние redux для свойства auth.userInfo.authUserInfo не определено до визуализации этого компонента
Ну, я так много подумал - у вас есть ответ, которым вы могли бы поделиться со мной?
Я не знаю остального, как работает ваше приложение. Вам решать, где вы устанавливаете это свойство состояния редукции auth.userInfo.authUserInfo, и убедитесь, что оно установлено перед рендерингом компонента.
Ответы 1
Итак, в основном, что вы делаете при вложении одного компонента в другой, то есть функциональный компонент, возвращающий другой компонент после некоторой проверки логического уровня. То, что ты делаешь, кажется хорошим. Вы должны иметь доступ к реквизитам (не к состоянию) в функциональном компоненте, подобном этому
let aComponent(props)=>{
return <p>{props.name}'s logged in status is {props.loggedIn}</p>
}
если вы используете такой компонент
<aComponent title = "Hello" loggedIn = {this.props.isLoggedIn}/> //isLoggedIn from redux store
Кроме того, если логическая проверка / проверка подлинности не удалась в withAuthentication, вам следует вызвать API-интерфейс маршрутизатора, чтобы перейти на нужную страницу.
т.е.
вы должны назвать это, если вы используете react-router
this.props.router.push('/login')
Привет, Манджот, спасибо за ответ. Извините, за этим сложно следить - вы говорите, что проверка входа в систему должна происходить в дочернем элементе hoc? Отменило бы это необходимость HOC?
Привет @AtlanteAvila, увидел там вашу ошибку. Попробуйте инициализировать состояние userInfo в вашем редукторе аутентификации следующим образом. initialState= { userInfo:{ sessionId:'' } }
Ошибка возникает из-за того, что ваше действие аутентификации не может заполнить состояние редуктора аутентификации userInfo до того, как компонент получит доступ к нему. Было бы лучше, если бы вы тоже могли поделиться своим фрагментом редуктора аутентификации
В чем ошибка / проблема или как она работает некорректно?