React中Axios Post请求失效，求助表单数据存入数据库方案

嘿，作为React新手碰到Axios Post请求的问题太正常了，我帮你梳理下代码里的问题和修复方案：

1. API.js里的postPeople函数核心问题 #

你当前的postPeople有两个关键问题：

• 没有返回axios请求的Promise，导致调用方没法处理请求的成功/失败状态
• 硬编码了请求数据，没法接收外部传入的表单参数，没法动态提交用户输入的内容

修复后的API.js代码：

const axios = require("axios");
const querystring = require('querystring');

export function getPeople(){
  return axios.get(`http://127.0.0.1:9000/people`)
}

// 修改为接收表单数据参数，并返回Promise
export function postPeople(formData){
  // 如果后端需要x-www-form-urlencoded格式，用querystring序列化
  return axios.post('http://127.0.0.1:9000/people', querystring.stringify(formData), {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  });
}

2. App.js中调用postPeople的正确姿势 #

假设你的addItem是处理表单提交的函数，需要确保：

• 从state中获取用户输入的表单数据
• 调用postPeople时传入数据，并处理异步请求的结果（成功/失败）

示例代码：

import React, { Component } from 'react';
import { getPeople, postPeople } from './api';

class App extends Component {
  state = {
    // 假设表单有一个bar字段，可根据实际表单调整
    bar: ''
  };

  handleInputChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  };

  addItem = async () => {
    try {
      // 传入表单数据
      const response = await postPeople(this.state);
      console.log('数据提交成功:', response.data);
      // 提交成功后可以重置表单或者刷新数据列表
      // 比如调用getPeople重新获取最新数据
    } catch (error) {
      console.error('提交失败:', error.response?.data || error.message);
    }
  };

  render() {
    return (
      <div>
        <input
          type="text"
          name="bar"
          value={this.state.bar}
          onChange={this.handleInputChange}
          placeholder="输入内容"
        />
        <button onClick={this.addItem}>提交</button>
      </div>
    );
  }
}

export default App;

3. 额外检查点 #

• 确认后端服务器http://127.0.0.1:9000是否正常运行，且/people接口支持Post请求
• 如果后端接收JSON格式数据，不需要用querystring.stringify，直接传对象即可，Axios会自动设置Content-Type: application/json：

export function postPeople(formData){
  return axios.post('http://127.0.0.1:9000/people', formData);
}

• 打开浏览器控制台的Network标签，查看Post请求的状态码、请求头和请求体，确认数据是否正确发送

内容的提问来源于stack exchange，提问作者Jota