Блог

Главная - Вопросы по программированию - Как запустить функцию, а затем установить состояние с помощью React

Как запустить функцию, а затем установить состояние с помощью React

#reactjs #react-hooks

Вопрос:

Я новичок в реагировании, и у меня возникают трудности.

В моем компоненте входа в систему у меня есть пользователь, нажимающий «Войти», который указывает на функцию handleLogin

   const handleLogin = () => {
    (userService.login(username, password);

    setUsername('');
    setPassword('');
  
  };

затем это вызывает функцию входа в систему в пользовательском сервисе:

 class UserService {


  login(username, password) {
    Axios.post('http://localhost:3001/login', {
      username: username,
      password: password,
    }).then((response) => {
      if (response.data.message) {
        return response.data.message;
      } else {
        localStorage.setItem('token', response.data.token);
        localStorage.setItem('user', response.data.result[0].id);
        return response.data.result[0];
      }
    });
  }

}

export default UserService;

После вызова этой функции я хочу, чтобы она обновила состояние, которое приведет к повторному отправке формы, и изменила мою кнопку входа в систему на кнопку выхода. Однако каждый раз, когда я запускаю его, он сначала сбрасывает состояние, а затем выполняет пользовательский сервис.функция входа в систему. Как я могу это исправить?

Комментарии:

1. Вам нужно вернуть обещание от службы и установить состояние в .then блоке при вызове userService.login(…).then(…)

2. Поскольку запросы axios уже являются обещаниями, вы можете просто выполнить return Axios.post(…) их в своем сервисе.

3. Большое вам спасибо, это сработало идеально!

Ответ №1:

Метод входа в систему из вашего класса является асинхронным событием, поэтому, чтобы он работал, вам нужно обернуть метод входа в систему выражением «асинхронный» :

 async login(username, password) {
 ...
}

А затем вы также можете превратить свою функцию handleLogin в асинхронную функцию, используя выражения async/await:

 const handleLogin = async () => {
    await userService.login(username, password);

    setUsername('');
    setPassword('');
  
};

Что это делает, так это сначала дождаться завершения метода входа в систему, а затем установить состояние в пустые значения. Я порекомендую вам возвращать новые значения в методе «вход» вместо установки их в локальном хранилище, чтобы вы могли получать их непосредственно из возвращенных значений в сервисе «handleLogin».войдите в систему» позвоните.

Метки: ,