CODEWITHSUNDEEP
reactjsasp.net-coreaxios
Kevin Li
Kevin Li

Reputation: 13

Axios post not passing body parameters

I am trying to post to an endpoint written in .NET Core, and it works when I hardcode the body parameters:

        var thisworks= {
            contact: {
                name: "test",
                phone: "07921212121"
            },
            timeSlotID: 3,
            date: "2020-10-01",
            description: "demo2dddd"
        }

        axios.post(
            'https://localhost:5001/api/v1/Book',
            thisworks,
            {
                headers:{
                    'Content-Type': 'application/json'
                }
            }).then...

But when I try to populate the values with props and React input ref, the body would not be passed through:

        userName = React.createRef();
        userPhone = React.createRef();
        userDescription = React.createRef();
...

        const appointmentTime = this.props.location.appointmentTime;

        var bookingParameters = {
            contact: {
                name: this.userName.current.value,
                phone: this.userPhone.current.value
            },
            timeSlotID: appointmentTime.timeSlotID,
            date: appointmentTime.date,
            description: this.userDescription.current.value
        }

        console.log(bookingParameters);  <-- the JSON has definitely been constructed with values in it

        axios.post(
            'https://localhost:5001/api/v1/Book',
            bookingParameters ,
            {
                headers:{
                    'Content-Type': 'application/json'
                }
            }).then...

Endpoint showing Body is null

Appreciate any help thanks!

Upvotes: 1

Views: 1430

Answers (2)

Gopinath
Gopinath

Reputation: 4937

The cause of the problem is due to the axios call being made in the constructor, along with the initiation of data.

The axios call that is using the body data must have got executed before the data object was fully initiated. This must have caused the observed problem.

How to fix the problem?

Step 1: Create a constructor to initialise the state of the component.

Step 2: Write a function to update state when the user updates input.

Step 3: Call axios from a handleSubmit() method that gets invoked when user clicks the 'submit' button of the form.

Working code snippet:

import React, { Component } from "react"
import axios from "axios"

export default class AxiosDemo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name : "",
            phone : "",
            description : ""
        }
    }
  

  onNameChanged = e => {
    this.setState({
      name: e.target.value
    })
  }

  onPhoneChanged = e => {
    this.setState({
      phone: e.target.value
    })
  }

  onDescriptionChanged = e => {
    this.setState({
      description: e.target.value
    })
  }

  handleSubmit = e => {
      e.preventDefault()
      const data = {
          name: this.state.name,
          phone: this.state.phone,
          description: this.state.description
      }

      axios.post("https://api-url-here", data)
           .then(res => console.log(res))
           .catch(err => console.log(err)) 
   }

   render() {
       return (
           <div>
               <form onSubmit={this.handleSubmit}>
                   <input value={this.state.name}
                          onChange={this.onNameChanged} 
                          required />
                   <input value={this.state.phone}
                          onChange={this.onPhoneChanged} 
                          required />
                   <textarea value={this.state.description}
                             onChange={this.onDescriptionChanged}
                             required />
                   <button type="submit">Submit</button>
               </form>
           </div>
      )
   }
}

More information: https://reactgo.com/react-post-request-axios/

Upvotes: 1

user10454516
user10454516

Reputation: 1143

I don't know at all about .NET, but, I think you are passing wrong variable? Your backend looking for bookingRecordRequest but you are passing bookingParameters. Try to match the variable name first. If the problem still occurs, try pass the body payload like this:

axios.post(
            'https://localhost:5001/api/v1/Book',
            { bookingRecordRequest },
            {
                headers:{
                    'Content-Type': 'application/json'
                }
            }).then...

Upvotes: 0

Related Questions