javascript - Trouble with Axios post request in basic MERN stack app

问题描述

I want to create an axios post request that sends the id's of a bull and a heifer chosen by a user to my server to calculate traits (in this case milk production) for their offspring. I'm trying to trigger it after the submit button is clicked. I think I'm not sending the id's as properly formatted params for the server to process.

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);
    })
  })
});```

标签： javascriptreactjspostaxiosmern

javascript - Trouble with Axios post request in basic MERN stack app

问题描述

解决方案

推荐阅读