После отправки формы входа я получаю свои ошибки от API для каждого конкретного случая и отображаю их под правильными входными данными. Проблема заключается в том, удалось ли войти в систему после отправки, состояния ввода инициализируются, ошибки отображаются, но каждый раз пользователь должен возвращаться ко всем вводам и заполнять их снова и снова, что очень раздражает.
Я новичок в реакции, и я действительно застрял в этих проблемах. Вот где я сейчас.
Фрагмент моего класса входа:
class Login extends Component {
constructor(props) {
super(props);
this.state = {
email: "",
password: "",
isLoggedIn: false,
user: {}
};
this.onChange = this.onChange.bind(this);
this.login = this.login.bind(this);
}
login(e) {
e.preventDefault();
this.props.login(this.state.email, this.state.password);
}
onChange(e) {
this.setState({ [e.target.name]: e.target.value });
}
Пример моего ввода:
<div className = "form-group centerErrs">
<input
type = "text"
value = {this.state.email}
onChange = {this.onChange}
className = "form-control form-control-user"
placeholder = "Username or Email Address"
autoComplete = "off"
id = "email-input"
name = "email"
/>
{this.props.errors ? (
<small className = "form-text red">
{this.props.errors.email}
</small>
) : null}
</div>
Фрагмент моей функции входа:
var formData = new FormData();
formData.append("email", email);
formData.append("password", password);
//posting to the api
.then(json => {
if (json.data.success) {
//handling the user data
let appState = {
isLoggedIn: true,
user: userData
};
// save app state with user date in local storage
localStorage["appState"] = JSON.stringify(appState);
this.setState({
isLoggedIn: appState.isLoggedIn,
user: appState.user
});
//updated : here how i handle in fail case
else {
let appState = {
isLoggedIn: false,
errors: json.data
};
this.setState({
isLoggedIn: appState.isLoggedIn,
errors: appState.errors
});
}
Обновление: это конструктор моего родительского компонента:
constructor(props) {
super(props);
this.state = {
isLoggedIn: false,
user: {},
errors: {},
};
this.login = this.login.bind(this);
}
Обновите контейнер входа:
const LoginContainer = () => (
<div>
{!this.state.isLoggedIn ? (
<Login login = {this.login} errors = {this.state.errors} />
) : (
<Redirect to = "/" />
)}
</div>
);
И рендер в родительском:
<Route exact path = "/(login)" component = {LoginContainer} />
Я просто хочу сохранить состояние ввода, если отправка формы не удалась.
Буду признателен за любую помощь и заранее благодарю вас.
@AnasBakro я обновил свой вопрос
было бы полезно, если бы вы могли опубликовать скрипт js, показывающий больше кода
Можете ли вы не обновлять isLoggedIn в случае сбоя, потому что по умолчанию оно равно false, поэтому его не нужно обновлять, и вы можете поделиться методом рендеринга родителя.
@AnasBakro, я снова обновил вопрос, надеюсь, это поможет





Пока LoginContainer является функцией, а не компонентом ReactJs, он воссоздает весь пользовательский интерфейс, поэтому вы должны преобразовать его в React.Component, и логика проверки состояния аутентификации не должна находиться внутри LoginContainer, потому что маршрут Login не должен существовать, если пользователь вошел в систему
{this.state.loggedin?
[Auth routes]:
[<Route exact path = "/(login)" component = {LoginContainer} />...]
P.S. предпочтительнее использовать глобальное хранилище для хранения состояния аутентификации, такого как redux, unstateed или любые другие.
Когда я начал с реакции, я не был уверен в реализации избыточности, теперь мне кажется, что мне нужно, спасибо за ваш ответ, это было очень полезно.
Пожалуйста, я думаю, что лучше начать с неустановленного, ознакомьтесь с этой небольшой статьей: medium.com/react-native-training/…
Ну, я уже начал с редукса, и я нашел его очень понятным и логичным. Еще раз спасибо :D
Не могли бы вы поделиться фрагментом родительского компонента и кодом, обрабатывающим ошибки ответа