基本 MERN 堆栈应用程序中的 Axios 发布请求问题

Question

我想创建一个 axios 发布请求，将用户选择的公牛和小母牛的 ID 发送到我的服务器，以计算其后代的特征（在本例中为产奶量）。单击提交按钮后，我试图触发它。我想我没有将 id 作为格式正确的参数发送给服务器处理。

import React, { Component} from 'react';
import axios from 'axios';  


class Dropdown extends Component {
    constructor (props) {
      super(props) 


      this.handleInputChange = this.handleInputChange.bind(this); 
      this.onSubmit = this.onSubmit.bind(this);

      this.state = {
        bullId: '',
        heiferId: ''
      }

     }

     //this updates state with new bull & heifer
      handleInputChange(event) {
        const target = event.target;
        const value = target.value;
        target.clicked = target.value;
        const name = target.name;
        console.log(target.name)
;
        this.setState({
          [name]: value
        });
        console.log(this.state);
      }


   handleChange = (event) => {
    var bull = event.target.value
    var heifer = event.target.value
    console.log(heifer)
    console.log(bull)
    };


 onSubmit(e) {
   e.preventDefault();

   const pairing = {
     heifer: this.state.heiferId,
     bull: this.state.bullId
   }
   console.log(pairing)

   axios.post('http://localhost:8000/traits/:bullId/:heiferId', pairing)
    .then(res => console.log(res.data));

    this.setState({
      bullId:"",
      heiferId:""
    })

 }

render() {
    return (
    <div>
      <form>
        <label>Bulls
          <select
          name={"bullId"}
          value ={this.state.bullId} 
          onChange= {this.handleInputChange}> 

            <option value="5defc2b5b9283d6de054e0f0">Buddy</option>
            <option value="5defc2b5b9283d6de054e0f1">Cooper</option>
            <option value="5defc2b5b9283d6de054e0f2">Maxwell</option>
            <option value="5defc2b5b9283d6de054e0f3">Gus</option>
            <option value="5defc2b5b9283d6de054e0f4">Paul</option>
            <option value="5defc2b5b9283d6de054e0f5">Phil</option>
            </select>
          </label>

        <br />


        <label>Heifers
          <select
            name={"heiferId"}
            value={this.state.heiferId}
            onChange= {this.handleInputChange}>

            <option value="5defc49cb9283d6de054e0f6">Sally</option>
            <option value="5defc49cb9283d6de054e0f7">Patches</option>
            <option value="5defc49cb9283d6de054e0f8">Maxine</option>
            <option value="5defc49cb9283d6de054e0f9">Peach</option>
            <option value="5defc49cb9283d6de054e0fa">Paula</option>
            <option value="5defc49cb9283d6de054e0fb">Flower</option>
          </select>
          </label>
       </form>
      <button onClick={this.onSubmit}>submit</button>
    </div>
    )}
}



export default Dropdown;

  Heifer.findOne({_id: req.params.heiferId}).then(function(heifer){
    Bull.findOne({_id: req.params.bullId}).then(function(bull){
      console.log(bull);
      console.log(heifer);

      let heiferMilkProduction = heifer.milkProduction;
      let bullMilkProduction = bull.milkProduction;

      if (heiferMilkProduction > bullMilkProduction) {
        heiferMilkProduction += heiferMilkProduction * .1  
        bullMilkProduction -= bullMilkProduction * .1

      } else {
        bullMilkProduction += bullMilkProduction * .1 
        heiferMilkProduction -= heiferMilkProduction * .1
      };

      const calfTraits = {
        bullMilkProduction,
        heiferMilkProduction
      }

      res.send(calfTraits);
    })
  })
});```

Answer 1

你想要类似的东西

 axios.post(`http://localhost:8000/traits/${this.state.bullId}/${this.state.heiferId}`)

字符串中的:bullId 语法在反应中没有任何作用，您必须像构建任何其他常规字符串一样构建字符串。它在 express 中用作路由的模板。

Answer 2

您需要在用于获取数据而不是字符串的 url 中嵌入 'bullId' 和 'heiferId' 的值。

onSubmit(e) {
e.preventDefault();

const { bullId, heiferId } = this.state;

axios.post(`http://localhost:8000/traits/${bullId}/${heiferId}`, {})
.then(res => console.log(res.data));

this.setState({
  bullId:"",
  heiferId:""
})

}