Запретить форме сбрасывать состояния ввода в ReactJs

После отправки формы входа я получаю свои ошибки от 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} />

Я просто хочу сохранить состояние ввода, если отправка формы не удалась.

Буду признателен за любую помощь и заранее благодарю вас.

Не могли бы вы поделиться фрагментом родительского компонента и кодом, обрабатывающим ошибки ответа

Anas Bakro 25.04.2019 02:45

@AnasBakro я обновил свой вопрос

khllifi zakaria 25.04.2019 18:11

было бы полезно, если бы вы могли опубликовать скрипт js, показывающий больше кода

Jake 25.04.2019 18:30

Можете ли вы не обновлять isLoggedIn в случае сбоя, потому что по умолчанию оно равно false, поэтому его не нужно обновлять, и вы можете поделиться методом рендеринга родителя.

Anas Bakro 25.04.2019 18:48

@AnasBakro, я снова обновил вопрос, надеюсь, это поможет

khllifi zakaria 26.04.2019 02:18
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
5
659
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Пока LoginContainer является функцией, а не компонентом ReactJs, он воссоздает весь пользовательский интерфейс, поэтому вы должны преобразовать его в React.Component, и логика проверки состояния аутентификации не должна находиться внутри LoginContainer, потому что маршрут Login не должен существовать, если пользователь вошел в систему

{this.state.loggedin?
 [Auth routes]:
 [<Route exact path = "/(login)" component = {LoginContainer} />...]

P.S. предпочтительнее использовать глобальное хранилище для хранения состояния аутентификации, такого как redux, unstateed или любые другие.

Когда я начал с реакции, я не был уверен в реализации избыточности, теперь мне кажется, что мне нужно, спасибо за ваш ответ, это было очень полезно.

khllifi zakaria 26.04.2019 22:35

Пожалуйста, я думаю, что лучше начать с неустановленного, ознакомьтесь с этой небольшой статьей: medium.com/react-native-training/…

Anas Bakro 26.04.2019 22:57

Ну, я уже начал с редукса, и я нашел его очень понятным и логичным. Еще раз спасибо :D

khllifi zakaria 27.04.2019 18:25

Другие вопросы по теме