在 React 中加载本地 JSON 文件以获取动态内容答案

【问题标题】：Loading local JSON file in React for dynamic content在 React 中加载本地 JSON 文件以获取动态内容
【发布时间】：2023-03-29 01:47:01
【问题描述】：

我试图找出访问本地 JSON 文件并将其存储在当前状态的最佳方式。我希望我在正确的轨道上:)

Project.js

import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";

// framer motion
import { motion } from "framer-motion";

const Project = (props) => {
const { projectID } = useParams();
const [project, setProject] = useState({});

  useEffect(() => {
    fetch('src/data/projects.json', {
      headers: {
        "Content-Type": "application/json",
        "Accept": "application/json",
      },
    })
      .then((res) => res.json())
      .then((data) => console.log(data));
  }, []);

  return (
    <motion.div exit={{ opacity: 0, transition: { duration: 1 } }}></motion.div>
  );
};

export default Project;

JSON 文件

[
{
  "title": "Example",
  "id": "1",
  "src": "example.png"
},
{
  "title": "Example 2",
  "id": "2",
  "src": "example-2.png"
}
]

【问题讨论】：

你试过console.log({res})吗？也许 JSON 本身的格式不是有效的。
你能试着去掉第二个对象后面的逗号吗？当我尝试使用实时代码时，这是一个愚蠢的猜测。
我可以知道你为什么使用 fetch 来加载本地 json file 吗？您可以使用import 正常导入json 数据
@SifatHaque：我认为以这种方式获取 json 数据也没有任何问题 :)
@jmvdc 查看这篇文章Unexpected token < in JSON at position 0

标签： javascript json reactjs

【解决方案1】：

这显然看起来您的相对路径不正确。

更新：从 cmets 和交叉检查中可以清楚地看出，我们必须将 json 文件移动到公共文件夹中才能正常工作。

所以你需要先这样做，直接使用这个路径：

fetch('data/projects.json',

演示如下： https://codesandbox.io/s/json-fanda-stydg?file=/src/App.js

【讨论】：

打错我的坏兄弟。
你能显示你的页面目录图片吗？
让我看看伴侣
这在技术上应该可行:) 你能为这个创建一个沙箱吗？并与我分享链接......或者只是为了检查它是否工作尝试从 fetch 中删除标题内容......
fetch("./../data/projects.json'') .then(response => response.json()) .then(json => console.log(json));

【解决方案2】：

我会使用import 加载json data 然后使用它们。

到fetch 数据你need to 上传你的文件到public 文件夹。然后您可以轻松加载该json data。这是link of working code。

确保您已将数据上传到公用文件夹中。否则将无法正常工作。

  const [projects, setProjects] = useState([]);

  const fetchJSONDataFrom = useCallback(async (path) => {
    const response = await fetch(path, {
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json"
      }
    });
    const data = await response.json();
    setProjects(data);
  }, []);

  useEffect(() => {
    fetchJSONDataFrom("data/projects.json");
  }, [fetchJSONDataFrom]);

【讨论】：

但从技术上讲，这根本不需要 :) 我们可以在任何地方获取数据，并且可以随时获取 :)
@ImranRafiqRather 可能会以这种方式配置创建反应应用程序。不过我不确定。
是的 :) 我也检查过了。它适用于公用文件夹
@jmvdc 很高兴它有帮助。请不要犹豫，投票或将此设置为已接受的答案。可能这也会对其他人有所帮助:)
@ImranRafiqRather 很高兴听到这个消息 :)

【解决方案3】：

直接导入json文件（不使用fetch）。

import data from 'src/data/projects.json';

像这样对数据进行字符串化和解析：

const loadedData = JSON.stringify(data);
const json = JSON.parse(loadedData);

现在您有 json 变量作为包含您的数据的有效数组。

【讨论】：

根本不需要。即使这样做了，那么首先我们需要先导出 JSON 数据 :)
我已经有了一个不使用 fetch 的解决方案，但我正在尝试使用 promises 解决这个问题
@ImranRafiqRather 我没有导出它。你是什么意思？我使用上面提供的数据创建了普通的 .json 文件（没有创建 const 并导出它），然后以 data 的名称导入该文件。也许我犯了一些重大错误。
你的观点也是有效的......我的错。这是我们在数据中使用 .js 扩展名的时候。我们必须导出它:)