React使用自定义Hook拉取public下data.json本地及Vercel部署失效求助

问题排查步骤 #

1. 先确认文件路径和可访问性
   直接在浏览器地址栏输入http://localhost:<你本地服务启动的端口>/data.json，比如你本地跑在3000端口就输http://localhost:3000/data.json，看能不能正常打开json文件：

• 如果打不开报404：检查data.json是否存放在和src同级的public根目录下，不要放在src内的public或者public的子文件夹里；同时确认文件名大小写完全匹配，不要写成Data.json/data.JSON这类格式。
• 如果能打开但还是报错：进入下一步排查其他问题。

2. 定位具体报错信息
   你当前的useFetch做了错误捕获但只返回通用提示，建议先在catch块加一行日志打印具体错误：

// 在useFetch的catch块内加这行
console.log('请求错误详情：', err)

然后打开浏览器控制台看错误类型：

• 如果报AbortError：说明请求在返回前被中止了，你的useFetch的effect清理函数会在组件重渲染/卸载时中止请求，检查useFrequency等其他Hook是否会导致TaskList组件频繁重渲染，打断请求流程。
• 如果报JSON parse error：说明你的data.json格式不合法，检查是否有多余逗号、引号未闭合等语法问题，复制json内容到校验工具验证即可。
• 如果报404：回到第一步重新检查文件路径和脚手架的base配置，如果你用Vite且在vite.config.js中配置了base子路径，fetch时需要加上对应前缀，比如base设为/project/，则请求地址要写为/project/data.json。

3. 验证useFetch逻辑是否正常
   先替换成原生fetch做测试，排除自定义Hook的逻辑问题：

// 在TaskList组件内加这段测试
useEffect(() => {
  fetch('/data.json')
    .then(res => res.json())
    .then(data => console.log('原生请求拿到的数据：', data))
    .catch(err => console.error('原生请求报错：', err))
}, [])

如果原生请求能正常拿到数据，说明你的useFetch逻辑存在问题：当前useFetch的逻辑中，仅POST请求依赖options触发重发，GET请求仅在url、method变化时触发，逻辑本身是通顺的，大概率是重复渲染导致请求被中止的问题。

4. Vercel部署注意事项
   本地调试通后部署到Vercel不需要额外配置，只要public目录路径正确，fetch("/data.json")可以正常工作，不需要额外处理环境变量。

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