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

时间:2021-04-13 17:12:22

标签: javascript reactjs react-hooks

我是 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}>
    </>
  )

1 个答案:

答案 0 :(得分:2)

您不需要使用 useEffect Hook,因为您不会在组件加载/更改时执行它。 而是将 async/promise 与函数 handleSubmit 一起使用

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}>
    </>
  )