如何在React中處理PHP返回的JSON數據

要在React中處理PHP返回的JSON數據，您需要遵循以下步驟：

1. 首先，確保您的PHP腳本返回JSON格式的數據。例如，您可以創建一個名為data.php的文件，其內容如下：

<?php
header('Content-Type: application/json');
$data = array(
    'name' => 'John Doe',
    'age' => 30,
    'city' => 'New York'
);
echo json_encode($data);
?>

2. 在React應用程序中，使用fetch()函數從PHP腳本獲取數據。例如，在App.js文件中，您可以編寫以下代碼：

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

function App() {
  const [data, setData] = useState({});

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      const response = await fetch('http://localhost/data.php');
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      const jsonData = await response.json();
      setData(jsonData);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  return (
    <div className="App">
      <h1>User Data</h1>
      <p>Name: {data.name}</p>
      <p>Age: {data.age}</p>
      <p>City: {data.city}</p>
    </div>
  );
}

export default App;

這段代碼首先定義了一個名為data的狀態變量，然后使用useEffect鉤子在組件加載時調用fetchData函數。fetchData函數使用fetch()從PHP腳本獲取數據，并將結果存儲在data狀態變量中。最后，我們在JSX中顯示從PHP腳本獲取的數據。

請注意，您需要根據實際情況修改URL，以便正確指向您的PHP腳本。同時，確保您的開發服務器和PHP服務器運行在相同的端口上，以避免跨域問題。