React用fetch请求同目录JSON报Unexpected token <错误如何解决

该错误核心是fetch请求返回的内容并非合法JSON格式，报错中的<是HTML文档的首字符，具体触发逻辑如下：

• 使用CRA、Vite等标准构建工具的React项目中，只有放在public目录下的静态资源才会被暴露为可直接访问的HTTP路径。你将Objects.json和组件代码一同放在src目录下时，构建工具不会将其作为静态资源对外暴露，请求该路径时服务端会返回默认的404 HTML页面，result.json()尝试将HTML内容解析为JSON时就会抛出该错误。
• 你认知中的「路径正确」是源码文件的相对路径，但fetch发起的是HTTP请求，路径是相对于当前页面的访问地址，和源码目录结构没有直接关联。

方案1：将JSON放入public目录（推荐，适合大体积/需要动态更新的JSON） #

1. 把Objects.json移动到项目根目录的public文件夹下
2. 修改fetch请求的路径为站点根路径的绝对地址，避免嵌套路由导致的路径偏移：

fetch('/Objects.json')

方案2：直接导入JSON（适合小体积静态JSON，无需额外请求） #

如果JSON内容是固定的，不需要动态拉取，可以直接在组件中导入，完全省去fetch逻辑：

import React from 'react';
import Objects from './Objects.json'; // 直接导入同目录的JSON文件

export default function Coding() {
    // 直接用导入的JSON初始化状态即可
    const [codingList, setCodingList] = React.useState(Objects);

    return (
        <div>

        </div>
    )
}

额外提示：你现有代码中状态变量名Coding和组件名重名，容易引发作用域冲突，建议修改为小写开头的语义化名称（比如codingList）。

后续遇到同类JSON解析报错时，可以先打印响应内容确认问题：

fetch('/Objects.json')
  .then(res => {
    console.log('响应状态码：', res.status) // 状态码为404则说明路径错误
    // 先转成文本打印确认内容是否符合JSON格式
    return res.text().then(text => {
      console.log('响应内容：', text)
      return JSON.parse(text)
    })
  })

内容的提问来源于stack exchange，提问作者Wayne