时间戳

首页 > 解决方案 > 在 React 中加载本地 JSON 文件以获取动态内容

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

问题描述

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

项目.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;

文件

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

在此处输入图像描述

标签： javascriptjsonreactjs

解决方案

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

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

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

fetch('data/projects.json',

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

推荐阅读