我的 fetch 无法提取与其在同一目录中的 JSON 文件答案

【问题标题】：My fetch is failing to pull a JSON file that is in the same directory as it我的 fetch 无法提取与其在同一目录中的 JSON 文件
【发布时间】：2021-11-09 04:36:06
【问题描述】：

我正在尝试将 JSON 文件提取到我的代码中。它与我试图将其放入的文件位于同一目录中，因此从我所看到的文件路径来看，这不是问题。这是我得到的错误...

VM45:1 Uncaught (in promise) SyntaxError: Unexpected token

import React from 'react';

export default function Coding() {
    const [Coding, setCoding] = React.useState([]);

    React.useEffect(() => {
        fetch('./Objects.json')
            .then((result) => {
                console.log(result.json())
                return result.json();
            })
            .then((pop) => {
                console.log('Coding')
                setCoding(pop);
                console.log(Coding)
            })
            .catch((err) => {
                console.log(err);
            });

    }, [])


    return (
        <div>

        </div>
    )
}

这是 JSON：

[
    {
        "ID": 1,
        "title": "Example",
        "content": "lorem ipsumssssssssssssssssss"
    },
    {
        "ID": 2,
        "title": "Example",
        "content": "lorem ipsumssssssssssssssssss"
    },
    {
        "ID": 3,
        "title": "Example",
        "content": "lorem ipsumssssssssssssssssss"
    },
    {
        "ID": 4,
        "title": "Example",
        "content": "lorem ipsumssssssssssssssssss"
    },
    {
        "ID": 5,
        "title": "Example",
        "content": "lorem ipsumssssssssssssssssss"
    }
]

【问题讨论】：

返回的是什么？您确定文件是在给定的 URL 下提供的吗？（检查网络标签。）
另外请记住，如果您使用客户端路由，相对 URL 可能无法为您提供所需的结果...例如，从网站 https://example.com/some/route/here 获取的 ./Object.json 将转到 @987654325 @ - 在此处指定相对于根的 URL 会更有意义。
JSON 文件存储在本地，在同一个文件夹中。不在互联网上托管。
那么你如何期望它在运行时从带有fetch 的网站加载呢？也许您想在编译时包含它？

标签： reactjs json fetch

【解决方案1】：

如果是本地 JSON 文件，则无需获取它。你可以直接require它：

const objects = require('./Objects.json');
React.useEffect(() => {
     console.log('Coding')
     setCoding(objects);
     console.log(Coding)
}, [])

【讨论】：

问题在于它没有以我可以提取 JSON 信息的方式记录代码。我的目标是将 JSON 对象转换为常规对象
我还计划在学习数据库后最终调用数据库。非常感谢您的帮助。