RN项目使用TypeScript+useEffect无法fetch本地JSON文件问题求助

问题根因 #

fetch API 仅支持请求网络URL、本地静态资源服务路径，你通过require导入本地JSON文件时，React Native会直接将JSON内容解析为JavaScript对象返回，而非返回本地文件的可访问路径，将JS对象传入fetch作为请求地址自然会触发网络请求失败错误。

修复方案 #

方案1：直接使用导入的JSON（最优解） #

不需要走fetch请求，导入后直接使用解析好的JS对象即可，代码修改如下：

// 导入时直接拿到JSON解析后的对象
const mockData = require('../../json/MOCK_DATA.json');

const [data, setData] = useState([]);

useEffect(() => {
  // 直接赋值即可
  setData(mockData.movies)
}, [])

方案2：模拟fetch请求场景（适用于临时模拟接口返回的场景） #

如果需要保留类fetch的Promise调用逻辑，可以手动包装实现：

const localJson = require('../../json/MOCK_DATA.json');

useEffect(() => {
  // 模拟fetch请求流程
  Promise.resolve(localJson)
  .then((json) => setData(json.movies))
  .catch((error) => alert(error))
}, [])

注意事项 #

• TypeScript项目需要在tsconfig.json中开启以下配置，否则会触发JSON导入的类型报错：

{
  "compilerOptions": {
    "resolveJsonModule": true,
    "esModuleInterop": true
  }
}

• 确认../../json/MOCK_DATA.json的相对路径正确，相对路径以当前编写代码的ts/tsx文件位置为基准计算。

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