使用 react 和 axios 向 nodejs api 发送 post 请求时输入 undefined

Question

我正在尝试向我使用 mysql 和 node js 使用 react 和 axios 创建的 API 发出发布请求。但是当我输入数据时，我得到的响应是“未定义的”。 当我用邮递员放置数据时，它可以工作。我试图记录我用浏览器发送的数据，我看到了它们。 所以我认为可能是结构

当我在浏览器中控制台记录数据时，我可以找出这些数据

adapter: ƒ xhrAdapter(config)
    data: "{"etudiants":{"name":"Fenohasina 
    Andrainiony","lastname":"fenohasina","birthdate":"12-12-12"}

所以我认为，我发送的数据结构可能与我可以在我的 API 上接收的结构不同，因为在我的 API 上：它只是

{"name":"Fenohasina 
    Andrainiony","lastname":"fenohasina","birthdate":"12-12-12"}

Is this the problem? 这是api代码：

app.post('/etudiants/add', (req, res)=>{
    const   {name,
            lastname,
            birthdate,
           
    } = req.query;
    const queryInsert =`insert into etudiants (name, lastname, birthdate) values('${name}', '${lastname}', '${birthdate}')`
    connection.query(queryInsert, (err, rows, fields)=>{
        if(err) {
            throw err
        }
        res.json(rows);
        res.end()
    })

} }`

还有 React 代码：

export default class PersonList extends React.Component {
  state = {
            name:'',
            lastname:'',
            birthdate:'',
  }
  handleSubmit = event => {
    event.preventDefault();
const etudiants = {
      name: this.state.name,
      lastname:this.state.lastname,
      birthdate:this.state.birthdate,

    };
  axios.post('http://localhost:8080/etudiants/add', {etudiants})
    .then(res=>{
      console.log(res);
      console.log(res.data)
    })
  }
  handleName = event => {
    this.setState({
      name: event.target.value
    })}
  handleLastname = event => {
    this.setState({
      lastname: event.target.value,
    })}

  handleBirthdate = event => {
    this.setState({
      birthdate: event.target.value
    })}
  
  render() {
    return (
      <div className='App'>
        <form onSubmit={this.handleSubmit}>
          <label>
            Person Name:
            <input type="text" name="name" id='name'value={this.state.name} onChange={this.handleName} />
          </label>
          <label>
            Person Lastname:
            <input type="text" name="lastname" id='lastname'value={this.state.lastname} onChange={this.handleLastname} />
          </label>
          <label>
            Person birthdate:
            <input type="text" name="genre" id='birthdate'value={this.state.birthdate} onChange={this.handleBirthdate} />
          </label>
          <button type="submit">Add</button>
        </form>
      </div>
    )

提前谢谢你！

Answer 1

是的，问题在于您发送的数据

应该是

axios.post('http://localhost:8080/etudiants/add', {...etudiants})

(请注意扩展运算符 ...，以便您的 etudiants 常量在您发送的对象中展开。否则它只会创建一个名为 etudiants 的属性，其中包含您的常量的内容 )

---

您的代码使用 ES6 中引入的短符号

见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Property_definitions

---

此外，您可以重复使用单一方法进行输入处理，因为它们都做同样的事情。所以handleName、handleLastname 和handleBirthdate 可以被替换为只是

handleInput = event => {
  const {name, value} = event.target;
  this.setState({
    [name]: value
  });
}

---

我终于想到了

<input type="text" name="genre" id='birthdate'

应该是

<input type="text" name="birthdate" id='birthdate'

Answer 2

我认为问题在于您如何在后端提取请求数据。在反应代码中，这是您向服务器发出请求的方式：

axios.post('http://localhost:8080/etudiants/add', {etudiants})

这样使用时，Axios 的默认行为是对请求数据进行 JSON 序列化（即{etudiants}）Refrence。
为了在后端接收和使用这些数据，您需要解析 JSON 请求正文，如果您使用的是正文解析器中间件 like this one，则应该已经为您完成了。然后，您可以像这样提取请求正文：

const { 
    name,
    lastname,
    birthdate,
   } = req.body.etudiants;

注意我是如何用req.body 替换req.query 并添加etudiants。