TypeError：无法使用 REDUX 读取 REACT 中未定义的属性“映射”

Question

I am trying to use redux to load data into the researchPage Component. I am completely uncertain as to why I am getting the following errors. I am new to Redux, and though it is a bit of boiler plate, I seem to be lost. I would very much appreciate any help that someone would be willing to give. I am getting the following errors:

error:

TypeError: Cannot read property 'map' of undefined
ResearchPage.render
C:/Users/dgponder/codeRepository/insight-react/insight-react-ui/src/pages/researchPage/reasearchPage.js:15
  12 |    }
  13 | 
  14 |    render() {
> 15 |        const hits = this.props.data.map(dataSet => (
     | ^  16 |            <div key={dataSet.id} className="query-div">
  17 |                <h3>{dataSet._index}</h3>
  18 |                <p>{dataSet.ContentTypeId}</p>
[HMR] Waiting for update signal from WDS...
index.js:1 Warning: Invalid DOM property `class`. Did you mean `className`?
    at img
    at a
    at nav
    at Navbar (http://localhost:3000/static/js/main.chunk.js:959:1)
    at div
    at Router (http://localhost:3000/static/js/0.chunk.js:37858:30)
    at BrowserRouter (http://localhost:3000/static/js/0.chunk.js:37478:35)
    at Provider (http://localhost:3000/static/js/0.chunk.js:34878:20)
    at App (http://localhost:3000/static/js/main.chunk.js:230:1)
console.<computed> @ index.js:1
printWarning @ react-dom.development.js:67
error @ react-dom.development.js:43
validateProperty$1 @ react-dom.development.js:3505
warnUnknownProperties @ react-dom.development.js:3559
validateProperties$2 @ react-dom.development.js:3583
validatePropertiesInDevelopment @ react-dom.development.js:8765
setInitialProperties @ react-dom.development.js:9041
finalizeInitialChildren @ react-dom.development.js:10201
completeWork @ react-dom.development.js:19470
completeUnitOfWork @ react-dom.development.js:22815
performUnitOfWork @ react-dom.development.js:22787
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
(anonymous) @ index.js:7
./src/index.js @ index.js:15
__webpack_require__ @ bootstrap:856
fn @ bootstrap:150
1 @ reportWebVitals.js:14
__webpack_require__ @ bootstrap:856
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
researchActions.js:6 fetching
researchActions.js:7 GET http://localhost:3000/[object%20Object] 404 (Not Found)
(anonymous) @ researchActions.js:7
(anonymous) @ index.js:8
(anonymous) @ redux.js:477
componentDidMount @ reasearchPage.js:11
commitLifeCycles @ react-dom.development.js:20663
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
(anonymous) @ index.js:7
./src/index.js @ index.js:15
__webpack_require__ @ bootstrap:856
fn @ bootstrap:150
1 @ reportWebVitals.js:14
__webpack_require__ @ bootstrap:856
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
reasearchPage.js:15 Uncaught TypeError: Cannot read property 'map' of undefined
    at ResearchPage.render (reasearchPage.js:15)
    at finishClassComponent (react-dom.development.js:17485)
    at updateClassComponent (react-dom.development.js:17435)
    at beginWork (react-dom.development.js:19073)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
    at renderRootSync (react-dom.development.js:22670)
    at performSyncWorkOnRoot (react-dom.development.js:22293)
    at react-dom.development.js:11327
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at batchedUpdates$1 (react-dom.development.js:22387)
    at Object.notify (Subscription.js:19)
    at Subscription.notifyNestedSubs (Subscription.js:90)
    at Subscription.handleChangeWrapper (Subscription.js:95)
    at dispatch (redux.js:222)
    at index.js:11
    at dispatch (redux.js:638)
    at researchActions.js:17
render @ reasearchPage.js:15
finishClassComponent @ react-dom.development.js:17485
updateClassComponent @ react-dom.development.js:17435
beginWork @ react-dom.development.js:19073
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
batchedUpdates$1 @ react-dom.development.js:22387
notify @ Subscription.js:19
notifyNestedSubs @ Subscription.js:90
handleChangeWrapper @ Subscription.js:95
dispatch @ redux.js:222
(anonymous) @ index.js:11
dispatch @ redux.js:638
(anonymous) @ researchActions.js:17
Promise.then (async)
(anonymous) @ researchActions.js:17
(anonymous) @ index.js:8
(anonymous) @ redux.js:477
componentDidMount @ reasearchPage.js:11
commitLifeCycles @ react-dom.development.js:20663
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
(anonymous) @ index.js:7
./src/index.js @ index.js:15
__webpack_require__ @ bootstrap:856
fn @ bootstrap:150
1 @ reportWebVitals.js:14
__webpack_require__ @ bootstrap:856
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1 The above error occurred in the <ResearchPage> component:

    at ResearchPage (http://localhost:3000/static/js/main.chunk.js:2141:1)
    at Connect(ResearchPage) (http://localhost:3000/static/js/0.chunk.js:35165:75)
    at Route (http://localhost:3000/static/js/0.chunk.js:38223:29)
    at Switch (http://localhost:3000/static/js/0.chunk.js:38425:29)
    at div
    at Router (http://localhost:3000/static/js/0.chunk.js:37858:30)
    at BrowserRouter (http://localhost:3000/static/js/0.chunk.js:37478:35)
    at Provider (http://localhost:3000/static/js/0.chunk.js:34878:20)
    at App (http://localhost:3000/static/js/main.chunk.js:230:1)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
console.<computed> @ index.js:1
logCapturedError @ react-dom.development.js:20085
update.callback @ react-dom.development.js:20118
callCallback @ react-dom.development.js:12318
commitUpdateQueue @ react-dom.development.js:12339
commitLifeCycles @ react-dom.development.js:20736
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
batchedUpdates$1 @ react-dom.development.js:22387
notify @ Subscription.js:19
notifyNestedSubs @ Subscription.js:90
handleChangeWrapper @ Subscription.js:95
dispatch @ redux.js:222
(anonymous) @ index.js:11
dispatch @ redux.js:638
(anonymous) @ researchActions.js:17
Promise.then (async)
(anonymous) @ researchActions.js:17
(anonymous) @ index.js:8
(anonymous) @ redux.js:477
componentDidMount @ reasearchPage.js:11
commitLifeCycles @ react-dom.development.js:20663
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
(anonymous) @ index.js:7
./src/index.js @ index.js:15
__webpack_require__ @ bootstrap:856
fn @ bootstrap:150
1 @ reportWebVitals.js:14
__webpack_require__ @ bootstrap:856
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
reasearchPage.js:15 Uncaught (in promise) TypeError: Cannot read property 'map' of undefined
    at ResearchPage.render (reasearchPage.js:15)
    at finishClassComponent (react-dom.development.js:17485)
    at updateClassComponent (react-dom.development.js:17435)
    at beginWork (react-dom.development.js:19073)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
    at renderRootSync (react-dom.development.js:22670)
    at performSyncWorkOnRoot (react-dom.development.js:22293)
    at react-dom.development.js:11327
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at batchedUpdates$1 (react-dom.development.js:22387)
    at Object.notify (Subscription.js:19)
    at Subscription.notifyNestedSubs (Subscription.js:90)
    at Subscription.handleChangeWrapper (Subscription.js:95)
    at dispatch (redux.js:222)
    at index.js:11
    at dispatch (redux.js:638)
    at researchActions.js:17
render @ reasearchPage.js:15
finishClassComponent @ react-dom.development.js:17485
updateClassComponent @ react-dom.development.js:17435
beginWork @ react-dom.development.js:19073
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
batchedUpdates$1 @ react-dom.development.js:22387
notify @ Subscription.js:19
notifyNestedSubs @ Subscription.js:90
handleChangeWrapper @ Subscription.js:95
dispatch @ redux.js:222
(anonymous) @ index.js:11
dispatch @ redux.js:638
(anonymous) @ researchActions.js:17
Promise.then (async)
(anonymous) @ researchActions.js:17
(anonymous) @ index.js:8
(anonymous) @ redux.js:477
componentDidMount @ reasearchPage.js:11
commitLifeCycles @ react-dom.development.js:20663
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
(anonymous) @ index.js:7
./src/index.js @ index.js:15
__webpack_require__ @ bootstrap:856
fn @ bootstrap:150
1 @ reportWebVitals.js:14
__webpack_require__ @ bootstrap:856
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
react_devtools_backend.js:2430 src\Redux\actions\researchActions.js
  Line 1:21:  'NEW_DATA' is defined but never used  no-unused-vars

src\Redux\reducers\researchReducer.js
  Line 1:21:  'NEW_DATA' is defined but never used             no-unused-vars
  Line 8:1:   Unexpected default export of anonymous function  import/no-anonymous-default-export

src\components\menu\navbar.js
  Line 11:21:  The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  Line 20:21:  The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
overrideMethod @ react_devtools_backend.js:2430
printWarnings @ webpackHotDevClient.js:138
handleWarnings @ webpackHotDevClient.js:143
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:210

I am placing all associated files below:

db.json - This is the local JSON file that I am trying to pull out of, and into redux.

{

    "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 - This is the component page that I am trying to pull the data into and create a card of some sort.

import React, { Component } from "react";
// import ReactDOM from "react-dom";
import './reasearchPage.style.scss'
import { connect } from 'react-redux'
// import { Card, Feed } from 'semantic-ui-react'
import { fetchData } from "../../Redux/actions/researchActions";


class ResearchPage extends Component {
    componentDidMount() {
        this.props.fetchData();
    }

    render() {
        const hits = this.props.data.map(dataSet => (
            <div key={dataSet.id} className="query-div">
                <h3>{dataSet._index}</h3>
                <p>{dataSet.ContentTypeId}</p>
            </div>
        ));
            return (
                <div>
                    <h1>Record MetaData</h1>
                    {hits}
                </div>
            );
        }
}

const mapStateToProps = state => ({
    data: state.data.dataItems
})

export default connect(mapStateToProps, {fetchData})(ResearchPage);

The below files are all of the redux files to store state:

researchActions.js - This file contains the actions for the research page. Which, as best as I can understand is fetching my data and delivering my payload.

import {FETCH_DATA, NEW_DATA} from "./types";
import data from '../../data/db.json'


export const fetchData = () => dispatch => {
    console.log('fetching')
        fetch(data, {
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            }
        })
            .then((res) => {
                if (res.ok) {
                    return res.json();
                }
            })
            .then(data =>
            dispatch({
                type: FETCH_DATA,
                payload: data
            })
            );
};

types.js - This file is housing my action types

export const FETCH_DATA = 'FETCH_DATA';
export const NEW_DATA = 'NEW_DATA'

researchReducer.js - This file is housing the reducer for the research page component.

import {FETCH_DATA, NEW_DATA} from "../actions/types";

const initialState = {
    dataItems: [],
    dataItem: {},
}

export default function(state =initialState, action) {
    switch (action.type) {
        case FETCH_DATA:
            return {
                ...state,
                dataItems: action.payload
            }
        default:
            return state;

    }
}

rootReducer.js - Is combining my reducers, though there is only one at the moment.

import { combineReducers } from "redux";
import researchReducer from './reducers/researchReducer';


export default combineReducers({
   data: researchReducer
})

store.js

import {createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk';
import rootReducer from './rootReducer'

const initialState = {};

const middleWare = [thunk];

const store = createStore(
    rootReducer,
    initialState,
    applyMiddleware(...middleWare)
);

export default store;

App.js

import React, {Component} from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import{ Provider } from 'react-redux';
import store from './Redux/store'
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(
        <Provider store={ store }>
        <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>
        </Provider>
    )
  }
}

Answer 1

This was answered via this block of code

import React, { Component } from "react";
// import ReactDOM from "react-dom";
import './reasearchPage.style.scss'
import { connect } from 'react-redux'
// import { Card, Feed } from 'semantic-ui-react'
import {fetchDataSuccess} from "../../Redux/actions/dataAction";


class ResearchPage extends Component {
    componentDidMount() {
        this.props.fetchDataSuccess();
    }

    render() {
        const { data } = this.props;

        return (
            <div>
                <h1 className='page-title'>Record MetaData</h1>

                {data.map(({ id, _index, ContentTypeId}) => (
                    <div key={id} className="query-div">
                        <h3>{_index}</h3>
                        <p>{ContentTypeId}</p>
                    </div>
                ))}
            </div>
        );