React中使用fetch方法无法读取本地.json文件如何解决

操作步骤 #

• 首先确认本地JSON文件的存放位置：使用CRA/Vite搭建的React项目中，所有需要通过fetch请求的静态资源必须放在public文件夹下，存放在src目录的资源会被webpack/vite打包处理，无法直接通过fetch读取。
• 修正请求路径与文件名：你的代码中请求路径./data缺失了.json后缀，路径需和public下的文件完全匹配。比如你将文件命名为data.json放在public根目录，请求路径直接写/data.json即可，无需使用相对路径。
• 新增错误捕获逻辑：原代码没有异常处理，无法定位是请求404还是JSON解析错误，修改后的可运行代码如下：

import React, { useState, useEffect} from "react";

export default function DataComponent() {
    const [data, setData] = useState(null);
    const [error, setError] = useState(null);

    async function fetchData() {
        try {
            const response = await fetch("/data.json");
            if (!response.ok) {
                throw new Error(`请求失败，状态码：${response.status}`);
            }
            const result = await response.json();
            setData(result);
        } catch (err) {
            setError(err.message);
            console.error("数据加载失败：", err);
        }
    }

    useEffect(() => {
        fetchData();
    }, []);

    if (error) return <div>加载出错：{error}</div>
    return (
        <div>{data ? JSON.stringify(data) : "数据加载中..."}</div>
    );
}

其他注意事项 #

• 不要使用./data.json、../public/data.json这类相对路径写法，当页面存在嵌套路由时会出现路径解析错误，直接使用/xxx.json的绝对路径从public根目录寻址即可。
• 提前校验本地JSON文件的格式合法性，存在语法错误会导致response.json()解析失败。

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