React 是一个流行的 JavaScript 库，用于构建动态网页和 Web 应用程序。当我们需要在 React 中使用本地 JSON 数据时，可以使用一些简单的技术来实现这个目标。
步骤一：创建数据文件
首先，我们需要创建一个包含 JSON 数据的文件。您可以手动创建一个 data.json 文件，并将其放置在 React 项目的 /public 目录中。以下是一个示例 JSON 数据：
-- -------------------- ---- -------
-
-
------- -------
------ ---
------- ---- -----
--
-
------- -------
------ ---
------- ---- --------
--
-
------- ------
------ ---
------- ---------
-
-步骤二：导入数据
接下来，在 React 组件中导入数据。我们可以使用 fetch() API 来从本地加载 JSON 文件。以下是一个示例组件：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
-------- ------------- -
----- ------ -------- - -------------
------------ -- -
----- -------- ----------- -
----- -------- - ----- --------------------
----- ---- - ----- ----------------
--------------
-
------------
-- ----
------ -
-----
------ --------------
----
-------------- -- -
--------------------
---
-----
------
--
-
------ ------- ------------在上面的示例中，我们使用了 useState() 钩子来定义一个名为 data 的空数组，以保存从 JSON 文件中加载的数据。然后，我们使用 useEffect() 钩子来异步地获取数据，并将其设置为 data 数组的值。
请注意，我们在 fetch('/data.json') 中使用了相对路径，因为我们将 JSON 文件放置在 /public 目录中。
步骤三：渲染数据
最后，我们可以使用 React 元素来渲染 data 数组中的项目。例如，我们可以使用 <ul> 和 <li> 元素来创建一个简单的列表：
<ul>
{data.map(item => (
<li key={item.name}>
{item.name}, {item.age} years old, from {item.city}
</li>
))}
</ul>请注意，在上面的示例中，我们使用了 key={item.name} 属性来帮助 React 跟踪每个列表项的唯一性。
总结
通过上述步骤，我们已经成功地在 React 中加载了本地 JSON 数据。这个技术可以用于许多场景，例如在静态网站中展示数据或在动态 Web 应用程序中与后端 API 交互。
除了以上提到的技术，还有很多其他的方式可以加载本地 JSON 数据。我们可以使用 axios 或 XMLHttpRequest 等第三方库，或者使用 import 语句导入 JSON 文件。但是，上述技术足以满足大部分需求，并为我们提供了一个良好的起点来学习 React 和 JavaScript 编程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29394