Django+React开发患者数据库表格仅显示表头，前端无请求发送求助

问题描述 #

我用Django做后端、React做前端开发一个展示patients数据库表数据的表格，现在网页只显示表头。已经确认SQLite Studio里该表有数据，用Postman测试GET/POST/PUT/DELETE接口都正常，但Firefox开发者工具的网络面板显示前端根本没向后端发请求。

前端React代码 #

import React, {Component} from 'react'
export class ViewPatients extends Component{
    constructor(props){
        super(props);
        this.state = {
            patient: [],
        };
    }
    fetchPatients = () => {
        fetch('http://127.0.0.1:8000/patient')
        .then(response => response.json())
        .then(data=> {
            this.setState({patient:data});
        })
        .catch(error => {
            console.error("Error Fetching Patients")
        });
    };
    componentDidMounted(){
        this.fetchPatients();
        // this.refreshList();
    }
    render(){
        const {
            patient
        } = this.state;
        return(
            <div>
                <table>
                <thead>
                <tr>
                <th>ssn</th>    
                    <th>address</th>
                    <th>age</th>
                    <th>gender</th>
                    <th>race</th>
                    <th>
                    medical history
                    </th>
                    <th>occupation</th>
                    <th>phone number</th>
                    <th>username</th>
                </tr> 
                </thead>
                <tbody>
                    {patient.map(pat => (
                    <tr key={pat.ssn}>
                        <td>{pat.ssn}</td>              
                        <td>{pat.address}</td>
                        <td>{pat.age}</td>
                        <td>{pat.gender}</td>
                        <td>{pat.race}</td>
                        <td>{pat.medicalHistory}</td>
                        <td>{pat.occupation}</td>
                        <td>{pat.phoneNumber}</td>
                        <td>{pat.username}</td>
                    <td>{/* Display scheduled vaccines here */}</td>
                </tr>
                    ))}    
                </tbody>               
                </table>
            </div>
        )
    }
}

Django Model代码（models.py） #

def validate_length(phone):
    if not (phone.isdigit() and len(phone) == 10):
        raise ValidateError('%(phone)s must be 10 digits', params={'phone':phone})
def IDVarifier(id):
    if not (id.isdigit() and len(id) == 9):
        raise ValidateError('%(id)s must be 9 digits', params={'id':id})
class Patient(models.Model):
    ssn = models.CharField(primary_key = True, max_length = 9)
    address = models.CharField(max_length = 50,default = '123 fake st')
    age = models.IntegerField(default = 0)
    gender = models.CharField(default = 'None', max_length = 6)
    race = models.CharField(default = 'None', max_length = 10)
    medicalHistory = models.CharField(max_length = 200, default = 'None')
    occupationalClass = models.CharField(max_length = 100, default = 'None')
    phoneNumber = models.CharField(max_length = 10,validators = [validate_length], default = '1234567890')
    username = models.ForeignKey("Credentials",max_length = 10, default = "default", on_delete=models.SET_DEFAULT)

问题原因及修复方案 #

• 核心问题：React类组件生命周期方法名错误，你写的componentDidMounted是不存在的，正确方法名为componentDidMount（去掉末尾的ed）。这个方法负责组件挂载后执行初始化逻辑，方法名错误导致fetchPatients函数从未被调用，自然不会发送请求。
• 修复步骤：
  1. 修正生命周期方法名：

     componentDidMount(){
         this.fetchPatients();
         // this.refreshList();
     }
     

  2. 修正字段映射错误：前端表格中occupation列绑定的pat.occupation与Model中的occupationalClass字段不匹配，需要改成pat.occupationalClass，否则该列会显示空值。
  3. 外字段格式检查：username是外键字段，需确认后端接口返回的是ID还是嵌套的Credentials对象，根据返回格式调整前端渲染逻辑，避免显示异常。

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