Лучший способ обновить реагирующий компонент на событие - PullRequest
0 голосов
/ 11 февраля 2020

Я создаю веб-приложение, в котором я использую React вместе с Firebase Authentication. У меня есть страница входа, и я хочу, чтобы она перенаправляла на другую страницу, когда пользователь уже вошел в систему.

Чтобы проверить, вошел ли пользователь в систему, я использую метод для извлечения объекта User, он возвращает нуль когда пользователь не вошел в систему и объект пользователя со всеми видами данных, если они есть.

В моем методе рендеринга (на странице входа в систему) есть оператор if, который проверяет, вошел ли пользователь в систему, но я столкнулся с проблемой. Когда пользователь впервые загружает страницу, API-интерфейсу Firebase требуется около полсекунды для извлечения пользовательского объекта, и до тех пор, пока он не будет завершен, мой пользовательский объект вернет значение null.

Это создает проблему, когда кажется, что хотя мой пользователь не вошел в систему, даже если они. Это заставляет их не перенаправлять и оставаться на странице входа в систему, пока состояние не будет каким-либо образом обновлено после инициализации объекта пользователя.

Firebase предлагает способ исправить это, предоставив нам метод onAuthStateChanged(), который позволяет мне выполнить функцию, когда пользователь входит в систему или выходит из нее.

Сейчас я использую этот метод в методе конструктора моего класса страницы входа для ручной повторной визуализации компонента, таким образом перенаправляя пользователь, когда Firebase регистрирует их. Это выглядит примерно так:

export default class Login extends React.Component<Props, State> {
    constructor(props:Props) {
        super(props)

        this.props.firebase.auth().onAuthStateChanged((user) => {
            const oldState = this.state
            this.setState(oldState)
        })

    }

    render () {

        if (this.props.firebase.auth().currentUser) {
            return (
                <Redirect to="/earn" />
            )
        } else {
            return (
                // Login page
            )
        }
    }
}

(я пропустил какой-то нерелевантный код)

Теперь это работает нормально и все, но я не уверен, если это правильный способ сделать это, и я чувствую, что могу сделать это намного приятнее, я просто не знаю, как.

Любые предложения или официальные способы достижения того, что я делаю сейчас, очень оценили.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...