React无法获取PHP返回的JSON数据，请求技术支持

核心问题 #

你的React代码存在以下几个关键问题导致data始终为空：

1. useEffect依赖数组写法错误
   你将表达式data == ""放入依赖数组，这不符合React useEffect依赖的规范——依赖数组应该存放状态/变量，而非表达式。这种写法会导致触发逻辑混乱，可能使fetchAPI无法正确执行或重复执行。

2. 初始状态类型不匹配
   初始data设为空字符串""，但后续要存储的是对象类型，这会导致渲染时访问data.name出现潜在错误，也不利于状态逻辑的一致性。

3. 错误捕获缺失
   fetchAPI的catch块为空，无法捕获并排查请求过程中可能出现的错误，比如JSON解析失败等问题。

修正后的React代码 #

import logo from './logo.svg';
import './App.css';
import { useState, useEffect } from 'react'

function App() {
  // 初始状态设为null，匹配后续对象类型
  const [data, setData] = useState(null);

  useEffect(() => {
    // 依赖数组设为空，确保组件挂载时仅执行一次请求
    fetchAPI()
  }, [])

  async function fetchAPI() {
    try {
      const response = await fetch('http://localhost:8000/server.php')
      if (response.ok) {
        let result = await response.json();
        console.log('请求结果:', result);
        setData(result);
      } else {
        console.log('请求失败，状态码:', response.status);
      }
    } catch (error) {
      // 添加错误日志，方便排查问题
      console.error('请求出错:', error);
    }
  }

  return (
    <div className="App">
      {/* 使用可选链操作符，避免初始状态为null时的错误 */}
      {data?.name}
    </div>
  );
}

export default App;

额外检查项 #

1. PHP端确认
   确保你的PHP代码没有输出任何额外内容（比如空格、错误提示），否则会导致response.json()解析失败。可以在echo $myJSON;前添加ob_clean();清空输出缓冲区，避免意外输出：

   <?php
     header('Access-Control-Allow-Origin: http://localhost:3000');
     ob_clean(); // 清空输出缓冲区
     ........
   
     $product = new Furniture();
     $product->set_name('prod1');
     $product->set_price('$4');
     $product->set_Dimensions('2X2X2');
     $myJSON = json_encode($product);
   
     echo $myJSON;
   ?>
   

2. 网络请求确认
   在浏览器开发者工具的「网络」面板中，查看server.php请求的响应内容是否与你提供的JSON一致，确保请求确实返回了正确的数据。

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