React.js前端通过Axios向Node.js后端传参并回显页面的问题求助

以下是针对你遇到的「仅能显示employee_id，其余字段无法正常显示」问题的分步排查方案：

一、检查前端holiday.js的Axios请求发送逻辑 #

确保请求体完整包含所有需要提交的字段，且字段名与后端定义完全一致：

// holiday.js 中的提交示例
axios.post('/api/holidays', {
  statusId: 1, // 确认字段名与后端接收的名称一致（注意驼峰/下划线差异）
  name: '春节假期',
  startDateTime: '2024-02-10T00:00:00',
  endDateTime: '2024-02-17T23:59:59',
  employee_id: 'EMP007'
})
.then(res => console.log('提交数据:', res.data))
.catch(err => console.error('提交失败:', err));

• 打开浏览器DevTools的「Network」标签，查看POST请求的Payload，确认所有字段都已被正确发送。

二、检查Node.js后端API.py的接收与返回逻辑 #

1. 确认后端正确接收所有字段 #

以Flask为例，需确保解析请求体并完整获取所有字段：

# API.py 接收请求的逻辑
from flask import Flask, request, jsonify

@app.route('/api/holidays', methods=['POST'])
def create_holiday():
    req_data = request.get_json()
    # 打印日志确认是否收到所有字段
    print("前端提交的数据:", req_data)
    
    # 数据库存储时需包含所有字段（列名与传入字段对应）
    # 示例：db.execute("INSERT INTO holidays (status_id, name, start_date, end_date, employee_id) VALUES (?, ?, ?, ?, ?)",
    #                (req_data.get('statusId'), req_data.get('name'), req_data.get('startDateTime'), req_data.get('endDateTime'), req_data.get('employee_id')))
    
    # 返回时需携带所有字段，供前端校验
    return jsonify({
        "id": 101,
        "statusId": req_data.get('statusId'),
        "name": req_data.get('name'),
        "startDateTime": req_data.get('startDateTime'),
        "endDateTime": req_data.get('endDateTime'),
        "employee_id": req_data.get('employee_id')
    })

2. 确认查询接口返回完整数据 #

确保获取所有假期的接口返回的每个对象都包含所需字段：

@app.route('/api/holidays', methods=['GET'])
def get_all_holidays():
    # 从数据库查询时需包含所有字段
    holidays = [
        {
            "id": 101,
            "statusId": 1,
            "name": "春节假期",
            "startDateTime": "2024-02-10T00:00:00",
            "endDateTime": "2024-02-17T23:59:59",
            "employee_id": "EMP007"
        }
    ]
    return jsonify(holidays)

三、检查allholiday.js的渲染逻辑 #

确保渲染时访问的字段名与后端返回的完全一致：

// allholiday.js 渲染示例
import { useEffect, useState } from 'react';
import axios from 'axios';

function AllHoliday() {
  const [holidays, setHolidays] = useState([]);

  useEffect(() => {
    axios.get('/api/holidays')
      .then(res => {
        // 打印返回数据，确认所有字段是否存在
        console.log("后端返回的假期数据:", res.data);
        setHolidays(res.data);
      })
      .catch(err => console.error('获取数据失败:', err));
  }, []);

  return (
    <div>
      <h2>所有假期</h2>
      <ul>
        {holidays.map(holiday => (
          <li key={holiday.id}>
            <p>员工ID: {holiday.employee_id}</p>
            <p>假期名称: {holiday.name || '未设置'}</p>
            <p>状态ID: {holiday.statusId}</p>
            <p>开始时间: {holiday.startDateTime}</p>
            <p>结束时间: {holiday.endDateTime}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default AllHoliday;

常见问题总结 #

1. 字段名不匹配：前端发送的驼峰式字段（如statusId）与后端期望的下划线式（如status_id）不一致，导致接收/返回时丢失数据。
2. 后端存储/返回遗漏字段：数据库插入时未包含目标字段，或查询接口返回时未携带这些字段。
3. 前端渲染字段名错误：渲染时写错字段名（如把startDateTime写成startDate），导致无法读取值。

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