Блог

Я создал страницу регистрации для своего веб-приложения с помощью React. Вот мой код для компонента регистрации —

 import React, { useState } from 'react';
import { Avatar,  Button, Paper, Grid, Typography, Container } from '@material-ui/core';
import axios from "axios";
import useStyles from './styles';
import Input from './Input';


const initialState = { name: '', email: '', password: '', mobile: '', confirmPassword: '' };

const Register = () => {
  const [form, setForm] = useState(initialState);
  const classes = useStyles();
  const handleSubmit = async () => {
      const { data } = await axios.post('http://localhost:4000/users/register', initialState);
      console.log(data); 
  };
  const handleChange = (e) => setForm({ ...form, [e.target.name]: e.target.value });
  return (
    <div>
      <Container component="main" maxWidth="xs">
        <Paper className={classes.paper} elevation={3}>
          <Typography component="h1" variant="h5">Sign up</Typography>
          <form className={classes.form} onSubmit={handleSubmit}>
            <Grid container spacing={2}>
                <Input name="name" label="Full Name" handleChange={handleChange} autoFocus/>
                <Input name="mobile" label="Mobile Number" handleChange={handleChange}/>
                <Input name="email" label="Email Address" handleChange={handleChange} type="email"/>
                <Input name="password" label="Password" handleChange={handleChange} type='password'/>
                <Input name="confirmPassword" label="Confirm Password" handleChange={handleChange} type="password"/>
            </Grid>
            <Button type="submit" fullWidth variant="contained" color="primary" className={classes.submit}>
              Sign Up
            </Button>
          </form>
        </Paper>
      </Container>
    </div>
  );
};
export default Register;
 

При отправке формы на стороне сервера запрос не выполняется. Вместо этого он снова перенаправляет на ту же страницу с параметрами запроса, равными входным телам формы. Что я здесь делаю не так?

Вы не препятствуете действию формы по умолчанию. Поскольку вы используете стандартную html-форму, отправив ее, вы просто отправите запрос get по умолчанию, который будет включать значения в URL-адресе, как вы сказали.

Предотвращение использования по умолчанию позволит вам затем выполнить действие, отличное от действия по умолчанию, например, вызов axios, который вы хотите.

   const handleSubmit = async (e) => {
      e.preventDefault()
      const { data } = await axios.post('http://localhost:4000/users/register', initialState);
      console.log(data); 
  };

 

Используйте event.preventDefault() в handelSubmit, так как это остановит действие браузера по умолчанию, которое перезагружается при отправке формы.

 const handleSubmit = async (event) => {
      event.preventDefault();
      // other line of code
};