创建一个表来显示数据库中的行

Question

我正在尝试创建一个表，该表将显示名为患者的数据库的行，并且我使用 Django 作为后端并作为前端创建了该表。当我尝试实现迄今为止创建的代码时，我在网页上看到的唯一内容就是我的表头。需要注意的是，我检查了sqlite studio，表中有数据存储。我检查了 PostMan，我的 Get、POST、PUT 和 DELETE 方法都工作正常，并且执行我希望它们执行的操作。我使用 Firefox 作为浏览器，并且检查了网络选项卡，但没有任何内容发送到后端。我会附上我在前端网页的初步尝试

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>
        )
    }
}

我也会提供我的model.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)

Answer 1

通过一些故障排除并因为忽略了这一点而将头撞到墙上，看来我错过了输入的 componentDidMount()。我输入了 componentDidMounted()。感谢@rabbibillclinton 花时间查看这篇文章