Установить состояние при отправке формы в функциональном компоненте

Question

В моем приложении для машинописного ввода - у меня есть компонент login и функция handleLoginRequest, которая устанавливает значение userMessage:

function Login() {
  let [userMessage, setUserMessage] = useState("");

  return (
    <form className="form-inline" onSubmit={(e) => {
      setUserMessage(handleLoginRequest(e))
    }} >
      <label className="mr-sm-2">Email address:</label>
      <input type="email" className="form-control mb-2 mr-sm-2" placeholder="Enter email" id="email" />
      <label className="mr-sm-2">Password:</label>
      <input type="password" className="form-control mb-2 mr-sm-2" placeholder="Enter password" id="password" />
      <button type="submit" className="btn btn-primary mb-2">Submit</button>
      {userMessage}
    </form>

  );
}

Обновление: handleLoginRequest - это запрос API

const handleLoginRequest = (event: any): any => {
  event.preventDefault();

  const data = {
    email: event.target.email.value,
    password: event.target.password.value
  };

  axios.post(`${process.env.REACT_APP_HTTP_PROXY}/api/v1/login`, data)
    .then(res => {
      console.log(res.data);
      return res.data;
    })
    .catch(err => {
      console.log(err);
      return err.message;
    });
}

Ожидаемое поведение:

При отправке формы вызывается функция setUserMessage(handleLoginRequest(e)). Я ожидаю, что он обновит значение userMessage до полученный запрос на вход в систему .

Фактический результат:

Без изменений в значении userMessage

Какое здесь исправление?

Answer 1

Обновленный ответ на вопрос об изменении вопроса

Проблема связана с тем, что вы пытаетесь установить состояние на основе ios пост-запроса. Запросы Ax ios являются асинхронными, что означает, что они будут происходить не по порядку в потоке управления программой. Поэтому, чтобы решить эту проблему, важно, чтобы вы позвонили на номер setUserMessage только после завершения запроса.

Пример кода:

axios.post(`${process.env.REACT_APP_HTTP_PROXY}/api/v1/login`, data)
  .then(res => {
    setUserMessage(res.data);
  })
  .catch(err => {
    // Do Something with error response
    setUserMessage("Error: Something with the request went wrong.");
  });

Я свяжу коды и поле, чтобы продемонстрировать :

https://codesandbox.io/s/focused-leakey-0jer4