我找不到如何使用 useEffect 钩子和 axios 发出 HTTP POST 请求的示例

Question

最近，我一直在尝试使用 useEFfect 钩子和 axios 发出 HTTP POST 请求，但代码在控制台中返回此错误：错误：请求失败，状态码为 422。POST 请求总是成功发出当我从表单 onSubmit 处理程序中创建它时。但是，当我尝试从 useEffect 钩子制作它时，它给出了那个错误。任何人都可以帮助我解决我做错了什么吗？代码如下：

 import React, { useState, useEffect } from "react";
import axios from "axios";

function RandomPost() {
  const [input, setInput] = useState({
    name: "",
    email: "",
    companyName: "",
    password: "",
  });

  const handleChange = (event) => {
    setInput({ ...input, [event.target.id]: event.target.value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
  };

  useEffect(() => {
    const { name, email, companyName, password } = input;
    axios
      .post(`https://01hire.collaq.com/user/createCompany`, input)
      .then((response) => {
        console.log(response);
      })
      .catch((error) => {
        console.log(error);
      });
  }, [input]);

  const { name, email, companyName, password } = input;
  return (
    <div>
      <form onSubmit={handleSubmit}>
        <label>
          Name:
          <input type="text" id="name" value={name} onChange={handleChange} />
        </label>
        <label>
          Email:
          <input type="text" id="email" value={email} onChange={handleChange} />
        </label>
        <label>
          Company Name:
          <input
            type="text"
            id="companyName"
            value={companyName}
            onChange={handleChange}
          />
        </label>
        <label>
          Password:
          <input
            type="password"
            id="password"
            value={password}
            onChange={handleChange}
          />
        </label>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default RandomPost;