create-react-app - 获取本地 JSON（通过 AJAX）

JS

# 使用create-react-app获取本地JSON数据（通过Ajax）

在React应用程序中获取本地JSON数据是一项常见的任务，特别是当我们需要模拟从服务器获取数据时。create-react-app是一个流行的React应用程序脚手架，它提供了一个简单而强大的方式来初始化React项目。在本文中，我们将探讨如何使用create-react-app并通过Ajax请求获取本地JSON数据。

## 创建React应用程序

首先，确保您已经安装了Node.JS和npm。然后，在命令行中运行以下命令来创建一个新的React应用程序：

bash
npx create-react-app JSon-fetch-app

这将在当前目录下创建一个名为JSon-fetch-app的新React应用程序。进入应用程序目录：

bash
cd JSon-fetch-app

## 设置本地JSON文件

在public文件夹中，您可以创建一个名为data.JSon的本地JSON文件。这个文件将模拟从服务器获取的数据。以下是一个简单的例子：

JSon
{
  "users": [
    { "id": 1, "name": "John Doe" },
    { "id": 2, "name": "Jane Doe" },
    { "id": 3, "name": "Bob Smith" }
  ]
}

## 创建组件并获取数据

在src文件夹中，创建一个名为JSonFetcher.JS的新组件。在这个组件中，我们将使用fetch函数来获取本地JSON数据。

JSx
import React, { useState, useEffect } from 'react';
const JSonFetcher = () => {
  const [data, setData] = useState(null);
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = awAIt fetch('/data.JSon');
        const JSonData = awAIt response.JSon();
        setData(JSonData);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };
    fetchData();
  }, []);
  return (
    <div>
      {data ? (
        <ul>
          {data.users.map((user) => (
            <li key={user.id}>{user.name}</li>
          ))}
        </ul>
      ) : (
        
Loading data...
      )}
    </div>
  );
};
export default JSonFetcher;

## 集成JSonFetcher组件

现在，我们可以在src/App.JS中集成JSonFetcher组件：

JSx
import React from 'react';
import JSonFetcher from './JSonFetcher';
function App() {
  return (
    <div className="App">
      <h1><strong>使用create-react-app获取本地JSON数据</strong></h1>
      <JSonFetcher />
    </div>
  );
}
export default App;

## 运行应用程序

最后，运行以下命令启动React应用程序：

bash
npm start

现在，您将在浏览器中看到一个简单的页面，显示从本地JSON文件中获取的用户数据。这是一个简单而实用的例子，展示了如何使用create-react-app和Ajax请求在React应用程序中获取本地JSON数据。