使用 fetch() 在 React 中无法识别本地 json 文件答案

【问题标题】：Local json File not being recognized in React with fetch()使用 fetch() 在 React 中无法识别本地 json 文件
【发布时间】：2026-01-11 15:45:02
【问题描述】：

我在使用 fetch() 的 React 中无法识别我的本地 json 文件时遇到了一些问题

代码如下：

import React, { useState, useEffect } from 'react';
import Datatable from "./datatable";
import Data from './data/data.json';
import './App.css';

require("es6-promise").polyfill();
require("isomorphic-fetch");

export default function App() {
  const [data, setData] = useState([])
  const [q, setQ] = useState("");
  const [searchColumns, setSearchColumns] = useState(["first_name", "last_name"]);

  useEffect(() => {
    fetch(Data)
    .then(response => response.json())
    .then(json => setData(json));
  }, []);

...如果有帮助，我可以添加一些附加代码。

我实际上只是得到一个空白页。出于好奇，我还尝试获取 json 文件的实际路径，但我收到了 webpack 加载器错误。

任何见解都会有所帮助。

【问题讨论】：

这取决于你想要做什么，但你可能根本不需要 fetch（fetch 是为了从 web 服务器获取文件，而不是本地文件）。见：*.com/questions/50007055/…

标签： json reactjs api fetch

【解决方案1】：

如果您已经在本地获取数据，则无需在远程服务器上获取它。试试看：

export default function App() {
  const [data, setData] = useState([])
  const [q, setQ] = useState("");
  const [searchColumns, setSearchColumns] = useState(["first_name", "last_name"]);

  useEffect(() => {
    // use your data here
    setData(Data);
    console.log('data', Data);
  });

  return(
    <div>yeah it works !</div>
  )
}

这是一个工作示例：https://stackblitz.com/edit/react-can3gq?file=data.json

【讨论】：