При нажатии на кнопку данные не добавляются - PullRequest
Новая
       47

При нажатии на кнопку данные не добавляются

3 голосов
/ 29 октября 2019

Я делаю приложение CRUD с React. Я добавил метод POST-данные в REST API, созданный в Node с помощью Axios для добавления нового пользователя, и форма создается с помощью пользовательского интерфейса материала.

С помощью метода handleChangeобрабатывается событие OnChange ввода формы со стилем Hooks, который устанавливает состояние для объекта.

Функция handleChange, в свою очередь, вызывает setUser, который обновляет пользовательское состояние с новым значением.

Но при заполнении формы и нажатии на кнопку «Добавить» ничего не происходит, оно не выдает ошибку, но не добавляет данные,

Есть идеи, почему это происходит? 

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


function UserAdd(props) {
  const initialState = { name: '', lastname: '', age:0 }

  const [user, setUser] = useState(initialState) 

  function handleChange(event) { 
    setUser({...user, [event.target.name]: event.target.value})
  }

  function handleSubmit(event) { 

    event.preventDefault();  

    const data={name:user.name, lastname: user.lastname, age: user.age}

    if(!user.name || !user.lastname || !user.age) return 
    async function postUser() {
      try {
        const response = await axios.post('/api/addUser', data); 
        props.history.push(`/user/${response.data._id}`);  
      } catch(error) {
        console.log('error', error);
      }
    }
    postUser();
  }

  function handleCancel() {
    props.history.push("/users");
  }

  return ( 
        <div style={{ padding: 16, margin: 'auto', maxWidth: 1000 }}> 
    <Typography variant="h4" align="center" component="h1" gutterBottom>
    Add User
  </Typography>
    <form onSubmit={handleSubmit} className={classes.container} >
      <TextField
        name="name"
        label="Name"
        className={classes.textField}
        value={user.name}
        onChange={handleChange}
        margin="normal"
        variant="outlined"
      />
      <TextField
        name="lastname"
        label="Lastname "
        className={classes.textField}
        value={user.lastname}
        onChange={handleChange}
        margin="normal"
        variant="outlined"
      />
      <TextField
        name="age"
        label="Age"
        className={classes.textField}
        value={user.age}
        onChange={handleChange}
        margin="normal"
        variant="outlined"
      />

      <Grid item style={{ marginTop: 30 }}>
        <Button
            variant="contained"
            color="primary"
            type="submit">
                  Add
        </Button>
      </Grid>
      <Grid item style={{ marginTop: 30 }}>
        <Button
            onClick={handleCancel}
            variant="contained"
            type="cancel">
                  Cancel
        </Button>
      </Grid>
    </form>
    </div>
  );
}

export default UserAdd

Метод API 

router.post('/api/addUser',async(req,res)=>{
    try {
        const {name,lastname, age}=req.body;
        await pool.request()
        .input('name', sql.VarChar(20), name)
        .input('lastname', sql.VarChar(35), lastname)
        .input('age', sql.Int (100), age)
        .execute('AddUser')
       res.send(req.body)
    } catch (error) {
        res.json({message:error.message})
    }
  });

1 Ответ

1 голос
/ 29 октября 2019

Я воссоздал ваш фрагмент кода в codeandbox, опуская стили и не соответствующие элементы. https://codesandbox.io/s/wizardly-perlman-ydh20, но изменилось await post на alert. И отправка формы работает. Так что проблема, скорее всего, в реализации post.

...