在 React.js 中如何从后端获取患者数据？

2024-03-24 08:00:23

React.js 中使用 axios 从后端获取患者数据

简介

在 React.js 中，可以通过 axios 库轻松地向后端服务器发送 HTTP 请求并获取数据。本文将详细介绍如何使用 axios 从后端获取患者数据，并通过 React 状态管理和生命周期函数进行渲染。

设置和数据获取

首先，在 React 组件中导入必要的依赖项：

import React, { Component } from 'react';
import axios from 'axios';

然后，在组件的构造函数中初始化状态，用于存储从后端获取的患者数据：

constructor(props) {
  super(props);
  this.state = {
    patient: {},
  };
}

在 componentDidMount 生命周期函数中，使用 axios.get 方法向后端发送 GET 请求，获取指定患者 ID 的数据：

componentDidMount() {
  axios.get('/patients/' + this.props.match.params.id)
    .then(res => {
      this.setState({ patient: res.data });
      console.log(this.state.patient);
    });
}

数据渲染

在 render 函数中，根据从后端获取的患者数据渲染相关信息：

render() {
  return (
    <div>
      <dl>
        <dt>Nom:</dt>
        <dd>{this.state.patient.nom}</dd>
        <dt>Prenom:</dt>
        <dd>{this.state.patient.prenom}</dd>
        <dt>Date de Naissannce:</dt>
        <dd>{this.state.patient.birth_date}</dd>
      </dl>
    </div>
  );
}