ReactJS与PHP后端JSON数据交互：使用Axios实现高效数据获取

<?php
  // 允许来自特定源的跨域请求。这里允许React应用（通常运行在3000端口）访问。
  // 在生产环境中，应将 'http://localhost:3000' 替换为你的React应用的实际域名。
  header('Access-Control-Allow-Origin: http://localhost:3000');
  // 允许的HTTP方法
  header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
  // 允许的头部
  header('Access-Control-Allow-Headers: Content-Type, Authorization');
  // 设置响应内容类型为JSON
  header('Content-Type: application/json');

  // 定义一个简单的类来模拟产品数据
  class Furniture {
      public $name;
      public $price;
      public $Dimensions;

      public function set_name($name) {
          $this->name = $name;
      }
      public function set_price($price) {
          $this->price = $price;
      }
      public function set_Dimensions($dimensions) {
          $this->Dimensions = $dimensions;
      }
  }

  // 创建产品实例并设置属性
  $product = new Furniture();
  $product->set_name('prod1');
  $product->set_price('$4');
  $product->set_Dimensions('2X2X2');

  // 将PHP对象编码为JSON字符串
  $myJSON = json_encode($product);

  // 输出JSON字符串
  echo $myJSON;
?>

npm install axios
# 或
yarn add axios

import React, { useState, useEffect } from 'react';
import axios from 'axios'; // 导入axios库
import './App.css'; // 假设有App.css样式文件

function App() {
  // 使用useState hook来管理组件的状态，初始值为一个空字符串或空对象
  const [data, setData] = useState(null); // 建议初始值设为null或{}，以便更好地判断数据是否已加载

  // 定义后端API的URL
  const url = "http://localhost:8000/server.php";

  // 使用useEffect hook在组件挂载后执行数据获取操作
  useEffect(() => {
    // 定义异步函数来获取数据
    const fetchAPI = async () => {
      try {
        // 使用axios.get发送GET请求
        const response = await axios.get(url);
        // Axios会自动解析JSON响应，数据在response.data中
        setData(response.data);
        console.log("Fetched data:", response.data);
      } catch (error) {
        console.error("Failed to fetch data:", error);
        // 可以设置一个错误状态来显示错误信息
      }
    };

    fetchAPI(); // 调用数据获取函数
    // 依赖数组为空（[]）表示此useEffect只在组件挂载时执行一次
  }, []); // 确保依赖数组为空，避免不必要的重复请求

  // 如果数据尚未加载，可以显示加载指示器
  if (!data) {
    return <div className="App">Loading data...</div>;
  }

  // 数据加载成功后，显示产品名称
  return (
    <div className="App">
      <h1>Product Details</h1>
      <p>Name: {data.name}</p>
      <p>Price: {data.price}</p>
      <p>Dimensions: {data.Dimensions}</p>
    </div>
  );
}

export default App;