Я предполагаю, что this.props.signIn
является асинхронной функцией.
И, таким образом, this.props.authError
обновляется асинхронно, и поэтому, если вы установите время ожидания, оно будет работать в некоторых случаях (когда вы получите ответ короче 5 секунд).
Один из способов решить эту проблему - использовать then
и catch
без обновления состояния формы
handleSubmit = e => {
e.preventDefault();
this.props.signIn(this.state).then(resp => {
this.setState({userIsValid: true, failure: null})
this.onUpdate(userIsValid);
})
.catch(err => {
this.setState({userIsValid: false, failure: "Failed to login"})
});
}
и используйте if-else
, чтобы определить, показывать ли форму или показывать ваш веб-сайт
class App extends React.Component {
render() {
if (this.state.isValidUser) {
return <Main />
} else {
return <LoginForm onUpdate={(isValid) => {this.setState({isValidUser: isValid})} />
}
}
}
Другими словами, компонент LoginForm хранит имя пользователя, пароль, сбой (сообщение об ошибке, почему вход не выполнен) и isValidUser (чтобы определить, успешен ли вход в систему).
Приложение имеет состояние, чтобы определить, что показать, веб-сайт или компонент входа в систему. Используя onUpdate
, который передается в качестве реквизита компоненту входа в систему, мы можем обновить состояние приложения и показать веб-сайт, если вход выполнен успешно.
Надеюсь, это поможет.