Json数据在React中进入页面

Question

我试图将数据从本地文件拉到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 |         })}

我的文件如下:

db。json -这是我用来拉数据的文件。这是一个很大的文件，所以我只使用了所有JSON数据开头的一小段。正如您所看到的，我只是试图将整个JSON对象拉到文件中。我不确定这是不是一个好主意，由于文件的大小

{
"hits": [
{
"_index": "issflightplan",
"_type": "issflightplan",
"_key": "IDP-ISSFLIGHTPLAN-0000000000000447",
"_version": 1,
"_score": null,
"ContentType": {
"__deferred": {
"uri": "https://bi.sp.iss.nasa.gov/Sites/FP/_api/Web/Lists(guid'a9421c5b-186a-4b14-b7b2-4b88ee8fab95')/Items(252)/ContentType"
}

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;

Answer 1

你犯了几个错误，这是你应该做的:

• 定义状态数据:

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

• 更改isLoading的条件检查:

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

• 从数据中提取正确的属性(数据是一个对象，但是你在它上面使用了map):

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

下面是我的最小工作示例:https://codesandbox.io/s/infallible-zhukovsky-96b95?file=/src/App.js:972-1064