reactjs - 在功能组件中的表单提交上设置状态

在我的react typescript应用程序中-我有一个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的值无变化

解决办法是什么？

最佳答案

根据问题修改的答案更新

问题源于您尝试基于axios发布请求设置setState的事实。 Axios请求是异步的，这意味着它们将与程序控制流程乱序发生。因此，要解决此问题，重要的是仅在请求完成后才调用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.");
  });

我将链接一个codeandbox来演示：

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