Question

我从表单中获取数据并使用提交按钮我需要将数据发送到服务器nodejs。但我无法使用axios将数据发送到服务器。而且我没有收到任何错误可能是什么问题？

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

我认为应该从axios.post调用handleSubmit()。目前，您的代码正在componentDidMount()中使用axios，它在React组件的生命周期中提前（自动）触发。

Answer 2

除了你打电话的方式外，一切都很合适， componentDidMount仅在呈现组件后才调用一次，因此您无法在此内部进行调用。

From React DOCs：

componentDidMount（）在组件出现后立即调用安装。需要DOM节点的初始化应该放在这里。如果你需要从远程端点加载数据，这是一个好地方实例化网络请求。

在handleSubmit方法中写下该帖子，它会起作用，试试这个：

componentDidMount(){

}

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

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

2 个答案: