Reactjs 如何使用fetch遍历React中的文件

我正在创建一个reactjs应用程序，并试图从一个文件中提取json数据，该文件位于不同的文件夹中，而不是进行fetch调用的索引js或jsx文件。但是，我无法判断文件是否被正确地拉取，或者根本没有拉取。我也不知道我的fetch函数是从index.js还是从它实际写入的.jsx文件调用的

文件夹布局：

基本文件夹

index.js

src（文件夹）
组件

FactsApp.jsx（获取调用在这里）

TestData（文件夹）

json（我试图检索的数据）

FactsApp.jsx：

    import React, { Component } from "react";
    import TitleBarApp from "./TitleBarApp";
    
    class FactsApp extends Component {
      state = {
        titleData: {
          titleName: "Quick Facts",
          SearchBool: true,
          SearchFunc: null,
        },
        displayData: {},
      };
    
      fetchFirst() {
        let that = this;
        fetch("/../TestData/QuickFactsData.json") //This is the fetch call in question
          .then(function (resp) {
            return resp;
          })
          .then(function (result) {
            console.log(result);
            console.log(result.json());
          });
      }
    
      componentDidMount() {
        this.fetchFirst();
      }
    
      render() {
        return (
          <div>
            <TitleBarApp titleData={this.state.titleData}></TitleBarApp>
          </div>
        );
      }
    }

从“React”导入React，{Component}；
从“/TitleBarApp”导入TitleBarApp；
类FactsApp扩展组件{
状态={
标题数据：{
标题：“快速事实”，
是的，
SearchFunc:null，
},
显示数据：{}，
};
fetchFirst（）{
让那=这；
fetch（“/../TestData/QuickFactsData.json”）//这是有问题的fetch调用
.然后（功能（resp）{
返回响应；
})
.然后（函数（结果）{
控制台日志（结果）；
log（result.json（））；
});
}
componentDidMount（）{
this.fetchFirst（）；
}
render（）{
返回(
);
}
}

您只需导入JSON

e、 g:

---

问题不仅仅是获取数据，而是通过“fetch”获取数据。如果我要使用任何形式的API，我就必须使用fetch，而这个程序是一种草稿。@Chaospyke将您的JSON文件放在公用文件夹中。。。之后，您可以获取这些文件

import JSONDATA from "../../TestData/QuickFactsData";

console.log(JSONDATA.BlahBlah);