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

我试图找出访问本地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文件移动到一个公共文件夹中，它才能工作

因此，您首先需要这样做，然后直接使用以下路径：

fetch('data/projects.json',

这里是演示：

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

字符串化和解析数据，如下所示：

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

---

现在您将

json

变量作为包含数据的有效数组。

我将使用

import

加载

json数据

，然后使用它们

要

获取

数据，您需要

将文件上传到
公共
文件夹中。然后您就可以轻松地加载
json数据
。这是你的电话号码

确保已将数据上载到公用文件夹中。否则它将无法工作。

  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]);

您是否尝试过
console.log（{res}）
？可能JSON本身的格式无效。能否尝试删除第二个对象后的逗号？在我尝试使用实时代码时，这是一个愚蠢的猜测。我可以知道为什么您要使用fetch加载本地
json文件
？您可以使用
import
@SifatHaque正常导入
json
数据：我也不认为以这种方式获取json数据有任何问题：）@jmvdc检查这篇文章在json中的位置0处的意外标记<，这根本不需要。即使这样做了，那么首先我们需要导出JSON数据：）我已经有了一个不使用fetch的解决方案，但我正在尝试使用promises@ImranRafiqRather我没有出口它。你这是什么意思？我用上面提供的数据创建了纯
.json
文件（不创建常量并导出），然后以
数据
的名称导入了该文件。也许我犯了一些重大错误。你的观点也是正确的。。。我的错。当我们在数据中使用.js扩展时。我们必须导出它：）它不工作请接受我的答案：）如果这对你有帮助，请点击我的答案同伴留下的勾号：）键入我的坏兄弟。你能显示你的页面目录图像吗？不，我仍然收到错误，但从技术上说，这根本不需要：）我们可以随时随地获取数据：）这种方法worked@ImranRafiqRather可以这样配置create react应用程序。不过我不确定。是的：）我也检查过了。它与公众关系良好folder@jmvdc很高兴这有帮助。请毫不犹豫地投赞成票或将此作为可接受的答案。可能这也会帮助其他人：）
const loadedData = JSON.stringify(data);
const json = JSON.parse(loadedData);

  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]);