javascript - 使用react和axios向nodejs api发送post请求时输入未定义

Question

我正在尝试向我使用 react 和 axios 使用 mysql 和节点 js 创建的 API 发出发布请求。但是当我输入数据时，我得到的响应是“未定义的”。 当我把数据放在 postman 那里时，它就起作用了。我试图记录我用浏览器发送的数据，我看到了它们。 所以我认为也许结构

当我 console.log 浏览器中的数据时，我可以找出那些数据

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"}

这是问题吗？ 这是 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 可以替换为 just

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'