如何在React中处理PHP返回的JSON数据 - 问答

要在React中处理PHP返回的JSON数据，您需要遵循以下步骤：

首先，确保您的PHP脚本返回JSON格式的数据。例如，您可以创建一个名为data.php的文件，其内容如下：

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

在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服务器运行在相同的端口上，以避免跨域问题。

0 赞

0 踩