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

Question

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

4

我正在尝试找到最佳方法访问本地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 FILE

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

- jmvdc

2

请问为什么您要使用fetch来加载本地的json文件？您可以直接使用import来导入json数据。 - Sifat Haque

@SifatHaque：我也认为以这种方式获取JSON数据没有任何问题 :) - Imran Rafiq Rather

我正在尝试一种不同的方法。这意味着我只需使用本地文件，然后筛选出JSON，并将返回的对象设置为当前状态。 - jmvdc

@ImranRafiq嗯，是的，我在想应该把什么放在获取URL中？ - jmvdc

试一试吧...如果这不起作用的话。我也想看看页面文件夹 :) - Imran Rafiq Rather

显示剩余10条评论

3个回答

2

我会使用import来加载json数据，然后使用它们。

要获取数据，您需要将文件上传到public文件夹中。然后，您可以轻松地加载那个json数据。这里是工作代码的链接。 确保您已经将数据上传到public文件夹中。否则它将无法正常工作。

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

- Sifat Haque

但从技术上讲，这根本不需要 :) 我们可以在任何地方存储数据，并且随时获取 :) - Imran Rafiq Rather

@ImranRafiq也许是因为create react app的配置方式不同。虽然我不确定。 - Sifat Haque

是的 :) 我也检查过了。它在公共文件夹中运作良好。 - Imran Rafiq Rather

@jmvdc 很高兴能帮到你。请不要犹豫，给我点赞或将此回答设为采纳。也许这对其他人也有帮助 :) - Sifat Haque

@ImranRafiq 很高兴听到这个消息 :) - Sifat Haque

1

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

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

将数据转换为字符串并解析如下：

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

现在你有一个名为 json 的变量，它是一个有效的数组，包含着你的数据。

- Luka

完全不需要。即使这么做，我们首先需要先导出JSON数据 :) - Imran Rafiq Rather

我已经有一个解决方案，而不是使用fetch，但我正在尝试使用promises来解决这个问题。 - jmvdc

@ImranRafiq，我并没有导出它。你是什么意思？我创建了一个纯粹的.json文件（没有创建常量和导出），其中包含上面提供的数据，然后只是将该文件导入为data的名称。也许我犯了一些重大错误。 - Luka

1

嗯，你的观点也是有道理的...我的错。当我们在数据中使用.js扩展名时，我们必须导出它 :) - Imran Rafiq Rather

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Imran Rafiq Rather · Accepted Answer

很明显，你的相对路径不正确。

更新：根据评论和交叉检查，我们必须将 json 文件移动到公共文件夹中才能使其正常工作。

因此，你需要先执行此操作，然后直接使用此路径：

fetch('data/projects.json',

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