React应用开发中如何fetch自定义创建的JSON文件数据？

本地localhost调试方案 #

你不需要额外把JSON传到公共托管，本地开发阶段直接用React项目自带的静态资源托管能力即可：

• 将你准备好的500词JSON文件放到项目根目录的public文件夹下，命名为wordlist.json（文件名可自定义）。
• 在组件中直接用fetch调用根路径下的文件即可，参考代码：

import { useEffect, useState } from 'react'

function WordleGame() {
  const [wordList, setWordList] = useState([])

  useEffect(() => {
    const loadWordLib = async () => {
      const response = await fetch('/wordlist.json')
      if (!response.ok) throw new Error('词库加载异常')
      const data = await response.json()
      setWordList(data)
      // 后续可在这里做随机抽取答案等初始化逻辑
    }
    loadWordLib().catch(err => console.error(err))
  }, [])

  return (
    // 游戏主体组件
    <div></div>
  )
}

export default WordleGame

注意：路径不要加public/前缀，也不要写相对路径./wordlist.json，直接以/开头写文件名即可，本地启动开发服务后，public目录下的文件会被直接映射到服务根路径。

如果你不需要刻意练习fetch API的写法，还有更简便的方式：把JSON文件放到src目录下，直接通过import导入即可，500个单词的体积极小，不会影响打包性能：

import wordList from './data/wordlist.json'
// 直接使用wordList变量即可，无需异步请求

Git仓库部署（作品集场景）适配方案 #

把项目上传到Git仓库、部署为静态作品集站点时，不需要额外修改核心逻辑，也不需要单独找公共托管存JSON文件：

• 只要把放在public目录下的wordlist.json跟着项目代码一起提交到Git仓库，项目构建时，构建工具会自动将public目录下的所有文件原封不动输出到构建产物的根目录，本地写的fetch逻辑可以直接在线上运行。
• 如果你部署在站点子路径下（比如GitHub Pages的项目页地址为https://你的用户名.github.io/wordle-game/），直接写/wordlist.json会出现路径404问题，这时候用项目内置的基础路径变量拼接地址即可：
  • Vite创建的项目写法：

  const response = await fetch(`${import.meta.env.BASE_URL}wordlist.json`)
  

  • Create React App创建的项目写法：

  const response = await fetch(`${process.env.PUBLIC_URL}/wordlist.json`)
  

验证路径是否正确的简单方法：不管本地还是线上环境，直接在浏览器地址栏访问「你的项目访问地址 + /wordlist.json」，如果能正常显示JSON内容，说明路径配置正确，fetch请求一定可以正常拿到数据。

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