单击按钮时，不会添加数据答案

【问题标题】：When you click on the button, the data is not added单击按钮时，不会添加数据
【发布时间】：2020-02-25 01:12:21
【问题描述】：

我正在用 React 做一个应用程序 CRUD 我使用 Axios 向 Node 中创建的 REST API 添加了一个 POST 数据方法，用于添加新用户，并且表单是使用 Material UI 制作的。

使用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})
    }
  });

【问题讨论】：

对我来说工作正常（没有 axios 调用）：codesandbox.io/s/submit-form-yojbb
可以添加 post() 代码@P.M 吗？
@DavidG。 API 方法？

标签： reactjs axios material-ui react-hooks

【解决方案1】：

我在代码和框中重新创建了您的代码 sn-p，同时省略了样式和不相关的元素。 https://codesandbox.io/s/wizardly-perlman-ydh20 但将await post 更改为alert。表单提交正在工作。所以问题很可能出在post 实现中。

【讨论】：