Question

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

当我在浏览器中进行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"}

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()
    })

} }`

反应代码：

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

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

window.mainloop()

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

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

请注意，我是如何将{etudiants}替换为const { name, lastname, birthdate, } = req.body.etudiants;并添加req.query的。

Answer 2

是的，问题出在您发送的数据上

应该是

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'

使用react和axios

2 个答案: