无法使用 axios 将数据发送到服务器

Question

i am taking the data from form and using submit button i need to send the data to server which is nodejs. but i am not able to send the data to server using axios. and also i am not receiving any error what may be the problem?

import React from 'react';
import axios from 'axios';
class Createstudent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert(this.state.value);

  }

  componentDidMount(){
    axios.post('http://localhost:8080/create',{value:this.state.value})
    .then(function(response){
      console.log(response);
    })
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

export default Createstudent;

Answer 1

I think axios.post should be called from handleSubmit() . Currently your code is using axios in componentDidMount() which is triggered early(automatically) in the lifecycle of your React component.

Answer 2

Everything is proper except the way ur making the post call, componentDidMount get called only once just after the rendering of the component, so u can't make a post call inside this.

From React DOCs :

componentDidMount() is invoked immediately after a component is mounted. Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request.

Write that post call inside handleSubmit method, it will work, try this:

componentDidMount(){

}

handleSubmit(event) {
    alert(this.state.value);
    axios.post('http://localhost:8080/create',{value:this.state.value})
      .then(function(response){
         console.log(response);
       })
}