添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

react 读取本地json

在 React 中读取本地的 JSON 文件,可以使用 JavaScript 中的 fetch() 方法或者 Axios 库进行读取和解析。下面是两种方法的代码示例:

  • 使用 fetch() 方法读取本地的 JSON 文件
  • fetch('data.json')
      .then(response => response.json())
      .then(data => {
        console.log(data); // 输出解析后的 JSON 数据
    

    在上面的代码中,我们使用 fetch() 方法来读取名为 data.json 的 JSON 文件,然后使用 .then() 方法链式调用 response.json() 方法来解析数据。最后,我们可以将解析后的数据输出到控制台中进行查看。

  • 使用 Axios 库读取本地的 JSON 文件
  • import axios from 'axios';
    axios.get('data.json')
      .then(response => {
        console.log(response.data); // 输出解析后的 JSON 数据
    

    在上面的代码中,我们使用 Axios 库的 get() 方法来读取名为 data.json 的 JSON 文件,然后使用 .then() 方法来处理响应。我们可以通过 response.data 属性来获取解析后的 JSON 数据,并将其输出到控制台中进行查看。

    需要注意的是,上面的示例代码假设 JSON 文件与 React 组件位于同一目录下,如果文件不在同一目录下,需要在 fetch() 或 Axios.get() 方法的参数中指定正确的文件路径。

    希望这些代码示例能够帮助你读取本地的 JSON 文件。

  • 广顾dun
    4年前
  •