React + MobX, аутентификация пользователя, ошибка рендеринга - PullRequest
2 голосов
/ 14 марта 2019

Я использую MobX для управления состоянием, а также сохраняю некоторую информацию в localStorage.

Вот как выглядит мой mobxStore:

const hydrate = create({
    storage: localStorage, // or AsyncStorage in react-native; default: localStorage
    jsonify: false  // if you use AsyncStorage, here shoud be true; default: true
})

export class VendorStore {
    @observable vendor = {};
    @persist @observable.ref loginState = localStorage.getItem('loginState');
}

var vendorStore = new VendorStore()
hydrate('vendorStore', vendorStore).then(() => console.log('vendorStore has been hydrated'))

export default vendorStore

Идея состоит в том, чтобы контролировать перенаправление страницы по loginState

Вот как выглядит мой Dashboard.js:

if (vendorStore.loginState === false) { return <Redirect to='/signin' /> }
    if (vendorStore.loginState === true) {
        return (
            <div className="Dashboard">
                <h1>Dashboard</h1>
                <Main />
            </div>
        )

Он либо не работает должным образом, не перенаправляет, когда loginState равен false, либо выдает ошибку реагирования рендеринга следующим образом:

react-dom.development.js:57 Uncaught Invariant Violation: Dashboard(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null;

Любая помощь будет оценена,

Спасибо

Ответы [ 2 ]

0 голосов
/ 14 марта 2019

Здесь есть несколько потенциальных проблем.

Во-первых, ваши вложенные ifs могут вызывать у вас проблемы, попробуйте изменить это на:

if (vendorStore.loginState) {
  return (
    <div className="Dashboard">
      <h1>Dashboard</h1>
      <Main />
    </div>
  )
} else {
  return <Redirect to='/signin' />
}

Во-вторых, если вы хотите, чтобы React ответилачтобы изменить loginState, вам нужно использовать что-то, что может предоставить loginState в качестве опоры для React.Так как ванильный React будет реагировать только на изменения состояния / реквизита.Попробуйте интегрировать https://github.com/mobxjs/mobx-react

0 голосов
/ 14 марта 2019

If else не работают на jsx, попробуйте ниже

vendorStore.loginState ?  return (
            <div className="Dashboard">
                <h1>Dashboard</h1>
                <Main />
            </div>
        ): return <Redirect to='/signin' /> 
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...