javascript - 无法编译数据以在 ReactJs 中呈现
问题描述
我目前正在尝试从 JSON 文件中获取数据并将其呈现到研究页面。我所做的一切似乎都不起作用。我想获取数据并将其放入某种表格或可视化中。请让我知道我可能做错了什么。我目前收到以下错误:
TypeError:无法读取未定义的属性“地图”
在我的数据目录中
damon-data.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"
}
然后在同一个目录中
data.js - 我的想法是我会在这里获取数据并使用道具将其传递给研究页面
import React, {Component} from 'react';
import data from '../data/damon-data.json'
import axios from 'axios';
class Data extends Component {
constructor(props) {
super(props);
this.state = ({
dataSet: []
})
}
componentDidMount() {
let url = data;
axios.get(url)
.then(response => {
console.log(response.data.hits)
this.setState({
dataSet: response.data.hits
})
})
.catch(error => {
console.log(error)
})
}
}
researchPage.js - 这是数据应该呈现的地方(一旦我把它呈现在这里,我想我可以开始把它放到一个表中。除非有更好的方法去做。
import React, { Component } from "react";
class researchPage extends Component {
constructor(props) {
super(props);
}
render() {
return(
<div>
{this.props.data.map((dataSet, index) => (
return <p>{dataSet.hits}</p>
))}
</div>
)
}
}
export default researchPage
应用程序.js
import React, {Component} from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import './App.css';
import Navbar from "./components/menu/navbar";
import Home from './pages/home/home'
import Explore from './pages/explore/explore'
import search from './pages/search/search'
import researchPage from "./pages/researchPage/reasearchPage";
import Query from './pages/query/query'
import Visualize from "./pages/visualize/visualize";
import Analyze from "./pages/analyze/analyze";
import Configure from "./pages/configure/configure";
class App extends Component{
render() {
return(
<BrowserRouter>
<div>
<Navbar/>
<Switch>
<Route path="/" component={Home} exact/>
<Route path="/explore" component={Explore} exact/>
<Route path="/search" component={search} exact/>
<Route path="/query" component={Query} exact/>
<Route path="/visualize" component={Visualize} exact/>
<Route path="/analyze" component={Analyze} exact/>
<Route path="/configure" component={Configure} exact/>
<Route path="/research" component={researchPage} exact/>
</Switch>
</div>
</BrowserRouter>
)
}
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
解决方案
假设您已正确完成所有步骤,则您的代码中立即存在错误,您正在保存response.data.hits
并再次尝试映射它<p>{dataSet.hits}</p>
,response.data.hits.hits
因为根据您的代码dataSet
实际上是hits
数组。所以你可能只想做
this.setState({
dataSet: response.data
})
除此之外,您似乎没有将数据传递给researchPage
组件。测试数据的最简单方法是直接在researchPage
组件中调用 API,然后从 props 中获取它,而不是从 state 中获取它:
<div>
{this.state.data?.map((dataSet, index) => (
return <p>{dataSet.hits}</p>
))}
</div>
或者,如果您想坚持使用以前的代码,则必须这样做:
<div>
{this.state.data?.map((dataSet, index) => (
return <p>{dataSet}</p>
))}
</div>
现在,如果您想将数据获取逻辑分开,那么您必须使用一些状态管理工具(我认为这对您来说是新的),或者使用 localStorage 测试它,或者您必须坚持使用父子模式,就像在 Data 组件调用中一样
<ResearchPage data={this.state.dataSet} />
(不推荐,只是提一下),或者您可以做一个丑陋的解决方案,即在 App.js 组件中调用数据 API,然后从那里将其传递给组件。
推荐阅读
- c# - Datatable.addrow 引发 System.Data.EvaluateException
- python - 从多个数据帧中获取最大长度数据帧
- python - 加密文件时如何在没有字符串参数的情况下修复编码?
- sonarqube - 我们可以在 SonarQube 中扫描 IronPython 代码吗?
- sublimetext4 - Sublime Text 3 vs Sublime Text 4:缺少“连接到服务器功能”
- postgresql-13 - PostgreSQL 读取错误:读取:没有这样的文件或目录 sql
- google-chrome-extension - 挂钩到松弛通知
- python - CommitFailedError - Kafka 消费者参数
- python - 获取 DataFrame 行百分位数的最佳方法
- postgresql - 使用 hstore/json -b 处理多个动态列