无法编译数据以在 ReactJs 中呈现

Question

我目前正在尝试从 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

App.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();

Answer 1

假设您已正确完成所有步骤，则您的代码中立即出现错误，您正在保存 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 进行测试，或者您必须坚持使用 Parent子模式，就像在 Data 组件调用中一样 <ResearchPage data={this.state.dataSet} />（不推荐，只是提一下），或者你可以做一个丑陋的解决方案，即在 App.js 组件中调用数据 API，然后从那里将其传递给组件。