本地JSON获取失败：JSON.parse语法错误问题求助

核心问题分析 #

你遇到的JSON.parse: unexpected character错误，结合文件结构来看，直接原因是fetch的路径和文件名完全不匹配：

• 实际JSON文件路径：src/data/data.json
• 代码中fetch的路径：../data/heliverse_mock_data.json

另外从UserList.jsx的位置（src/components/UserList）出发，相对路径层级虽没问题（../能回到src/目录），但文件名写错了，导致请求返回非JSON内容（比如404页面），进而触发JSON解析错误。

解决方案 #

方案1：修正fetch的路径和文件名 #

把fetch的路径改成正确的相对路径与文件名，同时增加请求状态校验：

useEffect(() => {
    fetch('../../data/data.json')
        .then((res) => {
            // 先校验请求是否成功，避免解析404等非JSON内容
            if (!res.ok) throw new Error(`请求失败，状态码：${res.status}`);
            return res.json();
        })
        .then((jsonData) => {
            dispatch(setUsers(jsonData))
        })
        .catch((err) => {
            console.error('错误信息：', err)
        })
}, [dispatch])

方案2：直接import JSON文件（更可靠） #

React项目中直接import本地JSON文件是更简单且不易出错的方式，无需依赖fetch：

import React, { useEffect , useState} from 'react'
import { useDispatch,useSelector } from 'react-redux'
import { setUsers } from '../store/store'
import UserCard from './UserCard'
import Pagination from './Pagination'
// 直接导入JSON文件
import mockData from '../../data/data.json'

const UserList = () => {
    const dispatch = useDispatch();
    const users = useSelector((state) => state.users.users)
    const [currentPage, setCurrentPage] = useState(1);
    const usersPerPage = 20;
    
    useEffect(() => {
        dispatch(setUsers(mockData))
    }, [dispatch])

    // 其余代码保持不变...
}

额外验证步骤 #

如果修改后仍有问题，可以先打印响应文本，确认返回内容是否为有效JSON：

fetch('../../data/data.json')
    .then(res => res.text())
    .then(text => {
        console.log('返回内容：', text); // 查看返回的是否是预期的JSON
        try {
            const jsonData = JSON.parse(text);
            dispatch(setUsers(jsonData));
        } catch (err) {
            console.error('JSON解析错误：', err);
        }
    })
    .catch(err => console.error('请求错误：', err))

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