如何在React中加载一个JSON文件在本教程中，我们将学习如何在React应用中加载和读取JSON文件。考虑一下，我

在本教程中，我们将学习如何在React应用中加载和读取JSON文件。

考虑一下，我们的react应用中有这个users.json 文件。

users.json

[
  {
    "id": 1,
    "name": "John"
  },
  {
    "id": 2,
    "name": "Pen"
  },
  {
    "id": 3,
    "name": "Lara"
  }
]

现在，我们要将上述JSON文件加载到反应组件中。

加载JSON文件

我们可以将JSON文件加载到react组件中，就像我们使用es6import 语句导入JavaScript模块或CSS模块一样。

App.js

import React from "react";
import Users from "./users.json";
export default function App() {

  return (
    <div className="App">
      <h1>Users list</h1>
      {Users.map(user => (        <li key={user.id}>{user.name}</li>      ))}    </div>
  );
}

在上面的代码中，我们首先将users.json 文件导入为一个Users JSON数组，并通过使用JavaScriptmap() 方法将其渲染到dom中。