React-Js - 使用 useEffect 发出 POST 请求和答案

【问题标题】：React-Js - Making POST request using useEffect andReact-Js - 使用 useEffect 发出 POST 请求和
【发布时间】：2021-07-08 18:40:23
【问题描述】：

我是 React-Js 的新手，我有一个注册页面，我想向我的后端发送一个 Post 请求。 UseState 正在工作，其他一切，我的方法是 handleSubmit 。如何通过使用 axios 或 fetch 从这里使用 useEffect？

export default function SignUp() {
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
  const [passowrd, setPassowrd] = useState('');
 
 const handleSubmit = e => {
  e.preventDefault();
  }

 return (
    <form className={classes.form} noValidate onSubmit={handleSubmit}>
    </>
  )

【问题讨论】：

为什么要使用useEffect？触发条件不是“表单提交时”吗？
另外，请添加handleSubmit
我在网上搜索，我看到很多人都在使用它，我愿意提供任何答案
是否必须使用 useEffect 进行 api 调用？您可以在 handleSubmit 函数本身中进行 api 调用。
没错。 useEffect 用于对状态/道具变化做出反应

标签： javascript reactjs react-hooks

【解决方案1】：

您不需要使用 useEffect Hook，因为您不会在组件加载/更改时执行它。而是使用带有函数 handleSubmit 的 async/promise

export default function SignUp() {
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
  const [passowrd, setPassowrd] = useState('');

  const handleSubmit = async () =>{ 
    const res = await axios.post('YOUR BACKEND',{
    username,email,password
    })
  }
  
  //remember to handle change for form inputs
 return (
    <form className={classes.form} noValidate onSubmit={handleSubmit}>
    </>
  )

【讨论】：