Javascript 将Json数据导入React中的页面

我正在尝试将数据从本地文件拉入React中的页面。我想使用这些数据构建一个动态填充的表。我真的需要一些帮助来理解我做错了什么。我当前遇到的错误是：

TypeError: Cannot read property 'map' of undefined

  41 | }
  42 | return(
  43 |     <div>
> 44 |         <h3>Title</h3>
     | ^  45 |         {data.map(dataSet => {
  46 |             <h3>{dataSet}</h3>
  47 |         })}

researchPage.js-这是我试图将JSON数据拉入的文件

import React, { Component } from "react";
import ReactDOM from 'react-dom'
import data from '../../data/db.json'


console.log(data)
class researchPage extends Component {
    state = {
        isLoading: false,
        error: null,
        dataSet: []
    }
    componentDidMount() {
        this.setState({isLoading: true})
        fetch(data)
            .then(res => {
                if(res.ok) {
                   return res.json()
            } else {
                    throw Error("Error Fetching Data")
                }
            })
            .then(data => {
                console.log(data)
                this.setState({ data, isLoading: false })
            })
            .catch(error => {
                console.log(error => this.setState( {error
                }))
            })
    }
    render() {
        const {error, isLoading, data} = this.state;

        if(error) {
            return <p style={{color: 'red'}}>
                {error.message}</p>
        }
        if(isLoading) {
            return <p>Loading Data...</p>
        }
        return(
            <div>
                <h3>Title</h3>
                {data.map(dataSet => {
                    <h3>{dataSet}</h3>
                })}
            </div>
        );
    }


}
export default researchPage;

import React，{Component}来自“React”；
从“react dom”导入react dom
从“../../data/db.json”导入数据
console.log（数据）
类researchPage扩展组件{
状态={
孤岛加载：false，
错误：null，
数据集：[]
}
componentDidMount（）{
this.setState（{isLoading:true}）
提取（数据）
。然后（res=>{
如果（res.ok）{
return res.json（）
}否则{
抛出错误（“获取数据时出错”）
}
})
。然后（数据=>{
console.log（数据）
this.setState（{data，isLoading:false}）
})
.catch（错误=>{
console.log（error=>this.setState（{error
}))
})
}
render（）{
const{error，isLoading，data}=this.state；
如果（错误）{
return

{error.message}
}
如果（孤岛加载）{
返回正在加载数据

}
返回(
标题
{data.map（数据集=>{
{dataSet}
})}
);
}
}
导出默认搜索页面；

您犯了几个错误，这是您应该做的：

• 定义状态中的数据：

• 更改isLoading的条件检查：

if（！isLoading）{
返回加载数据…
；
}否则

• 从数据中提取正确的属性（数据是一个对象，但您在其上使用了映射）：

{data.hits.map（（数据集）=>(
{dataSet.\u index}
))}         

---

这是我的最小工作示例：

仍然检查

this.state.data

是否为数组或长度？或者可以将

this.state.data

的初始值设置为空数组

[]

？我不确定我是否理解您的意思？

数据集

在状态下初始化，但渲染中使用了

数据

<代码>数据开始时未定义。

import React, { Component } from "react";
import ReactDOM from 'react-dom'
import data from '../../data/db.json'


console.log(data)
class researchPage extends Component {
    state = {
        isLoading: false,
        error: null,
        dataSet: []
    }
    componentDidMount() {
        this.setState({isLoading: true})
        fetch(data)
            .then(res => {
                if(res.ok) {
                   return res.json()
            } else {
                    throw Error("Error Fetching Data")
                }
            })
            .then(data => {
                console.log(data)
                this.setState({ data, isLoading: false })
            })
            .catch(error => {
                console.log(error => this.setState( {error
                }))
            })
    }
    render() {
        const {error, isLoading, data} = this.state;

        if(error) {
            return <p style={{color: 'red'}}>
                {error.message}</p>
        }
        if(isLoading) {
            return <p>Loading Data...</p>
        }
        return(
            <div>
                <h3>Title</h3>
                {data.map(dataSet => {
                    <h3>{dataSet}</h3>
                })}
            </div>
        );
    }


}
export default researchPage;

state = {
    isLoading: false,
    error: null,
    dataSet: [],
    data: data
  };

    if (!isLoading) {
      return <p>Loading Data...</p>;
    } else

{data.hits.map((dataSet) => (
     <h3>{dataSet._index}</h3>
))}