Question

在我的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的值不变

这里的解决方法是什么？

Answer 1

每次修改问题后更新的答案

问题源于您尝试根据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

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

1 个答案:

示例代码：