如何在 React 中从 PHP API 获取 JSON 数据并渲染到表格中-php教程-PHP中文网

如何在 React 中从 PHP API 获取 JSON 数据并渲染到表格中

本文介绍如何使用 fetch api 在 react 中异步获取本地 php 接口返回的 json 数据，并安全、正确地渲染为 html 表格，避免常见错误（如直接导入 url 或同步读取未就绪数据）。

本文介绍如何使用 fetch api 在 react 中异步获取本地 php 接口返回的 json 数据，并安全、正确地渲染为 html 表格，避免常见错误（如直接导入 url 或同步读取未就绪数据）。

在 React 中，不能像导入模块一样直接通过 import 语句加载 HTTP 地址（例如 import JsonData from 'http://localhost/index.php'），这是语法错误且违反浏览器同源策略与模块系统设计。PHP 后端返回的 JSON 必须通过异步网络请求获取，主流方式是使用原生 fetch() 或第三方库（如 axios）。

以下是基于函数组件 + React Hooks 的现代实现方案（推荐替代已废弃的 componentDidMount）：

import React, { useState, useEffect } from 'react';

function Body() {
  const [data, setData] = useState([]);     // 存储 API 返回的数组
  const [loading, setLoading] = useState(true); // 加载状态
  const [error, setError] = useState(null); // 错误信息

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('http://localhost/index.php');
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const jsonData = await response.json();
        setData(jsonData); // 假设后端返回的是对象数组，如 [{id: 1, name: "Alice"}, ...]
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []); // 空依赖数组确保只在组件挂载时执行一次

  if (loading) return <div classname="text-center mt-4">加载中...</div>;
  if (error) return <div classname="alert alert-danger">错误：{error}</div>;

  return (
    <div>
      <table classname="table table-striped">
<thead><tr>
<th>ID</th>
            <th>Nome</th>
          </tr></thead>
<tbody>
          {data.length === 0 ? (
            <tr><td colspan="2" classname="text-center">暂无数据</td></tr>
          ) : (
            data.map((item) => (
              <tr key="{item.id" item.name math.random>
<td>{item.id ?? 'N/A'}</td>
                <td>{item.name ?? 'N/A'}</td>
              </tr>
            ))
          )}
        </tbody>
</table>
</div>
  );
}

export default Body;

✅ 关键要点说明：

Revealjs Presentations

创建、编辑并部署 reveal.js 演示文稿为单个 HTML 文件，可选自定义 CSS。适用于需要制作演示文稿、幻灯片或宣传材料时使用。

下载

使用 useState 管理数据、加载和错误状态；
使用 useEffect 替代类组件生命周期，在组件首次渲染后发起请求；
添加 try/catch 和响应状态校验（response.ok），提升健壮性；
为 <tr> 设置唯一 <code>key（优先用 item.id，避免使用 Math.random() 在生产环境）；
处理空数据、加载中、请求失败等边界情况，提升用户体验；
注意：React 中 class 属性应写为 className（非 class）。

⚠️ 注意事项：

确保 PHP 接口正确设置 CORS 头（开发阶段可在 index.php 开头添加）：
```
<?php header("Access-Control-Allow-Origin: *"); ?>
```
生产环境请限制 Allow-Origin 到具体域名，并启用凭证支持（如需 Cookie）；
若 PHP 返回非数组（如单个对象或带包裹字段 {data: [...]}），需先解构再 map；
避免在渲染函数中直接调用 fetch —— 这将导致无限请求循环。

掌握这一模式，你就能稳定对接任意 RESTful JSON 接口，并灵活扩展为分页、搜索、编辑等功能。