Javascript '；地图'；未使用Redux和React定义

获取一个奇怪的错误，其中“map”未定义。我不确定我的函数是否在错误的时间启动，这会导致没有收到数据

我正在将Redux添加到我的简单小应用程序中，该应用程序只是从API中提取数据并显示数据。这是一群英雄的名单。正如我之前所说的，我认为错误来自ansyc API调用的不同时间以及Redux启动的不同时间。不过我还是个新手，所以非常感谢你的帮助

import React, {useEffect} from 'react'
import { connect } from 'react-redux'
import { fetchHeroes } from '../actions/heroesActions'
import { Hero } from '../components/Hero'

const HeroesPage = ({ dispatch, loading, heroes, hasErrors }) => {
    useEffect(() => {
        dispatch(fetchHeroes())
    }, [dispatch])

    const renderHeroes = () => {
        if (loading) return <p>Loading posts...</p>
        if (hasErrors) return <p>Unable to display posts.</p>
        return heroes.map(hero => <Hero key={hero.id} hero={hero} />)
    }

    return (
        <section>
            <h1>Heroes</h1>
            {renderHeroes()}
        </section>
    )
}

// Map Redux state to React component props
const mapStateToProps = state => ({
    loading: state.heroes.loading,
    heroes: state.heroes.heroes,
    hasErrors: state.heroes.hasErrors,
})

export default connect(mapStateToProps)(HeroesPage)

index.js，我在其中创建了存储

// External imports
import React from 'react'
import { render } from 'react-dom'
import { createStore, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import thunk from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension'


// Local imports
import App from './App'
import rootReducer from './reducers'


const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(thunk)))

render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
)

//外部导入
从“React”导入React
从'react dom'导入{render}
从“redux”导入{createStore，applyMiddleware}
从“react redux”导入{Provider}
从“redux thunk”导入thunk
从'redux devtools extension'导入{composeWithDevTools}
//本地进口
从“./App”导入应用程序
从“./reducers”导入rootReducer
const store=createStore（rootReducer，composeWithDevTools（applyMiddleware（thunk）））
渲染(
,
document.getElementById（'root'））
)

减速器锉

import * as actions from '../actions/heroesActions'
export const initialState = {
    heroes: [],
    loading: false,
    hasErrors: false,
}

export default function heroesReducer(state = initialState, action) {
    switch (action.type) {
        case actions.GET_HEROES:
            return { ...state, loading: true }
        case actions.GET_HEROES_SUCCESS:
            return { heroes: action.payload, loading: false, hasErrors: false }
        case actions.GET_HEROES_FAILURE:
            return { ...state, loading: false, hasErrors: true }
        default:
            return state
    }
}

---

此外，“console.log（response）”从不触发。所以它从来不会告诉我是否在控制台中获取数据，它是说map未定义，还是说您试图调用的map未定义？给我一个解释。@jornsharpe它是说地图没有定义。一旦我加载了第一个错误页面，我就会在index.js文件中创建我的存储。这有关系吗？没关系，你只需要在这里导入它就可以使用dispatchimport store了，“../index.js”说它找不到store你在其中编写createStore然后导出store的文件我将编辑主帖子并显示index.js。我在那里创建了商店。我不知道如何从那里出口。

import React, {useEffect} from 'react'
import { useSelector } from 'react-redux'
import { fetchHeroes } from '../actions/heroesActions'
import { Hero } from '../components/Hero'

const HeroesPage = () => {
    const data = useSelector(state => state.heroes);
    useEffect(() => {
        fetchHeroes();
    }, [])

    const renderHeroes = () => {
        if (data.loading) return <p>Loading posts...</p>
        if (data.hasErrors) return <p>Unable to display posts.</p>
        return data.heroes.map(hero => <Hero key={hero.id} hero={hero} />)
    }

    return (
        <section>
            <h1>Heroes</h1>
            {renderHeroes()}
        </section>
    )
}

export default HeroesPage

// import store from your createStore file and access dispatch from it
dispatch = store.dispatch
export const GET_HEROES = 'GET HEROES'
export const GET_HEROES_SUCCESS = 'GET_HEROES_SUCCESS'
export const GET_HEROES_FAILURE = 'GET_HEROES_FAILURE'


export const getHeroes = () => ({
  type: GET_HEROES,
})

export const getHeroesSuccess = heroes => ({
  type: GET_HEROES_SUCCESS,
  payload: heroes,
})

export const getHeroesFailure = () => ({
  type: GET_HEROES_FAILURE,
})


export const fetchHeroes = () => {
  dispatch(getHeroes())

  try {
    const response = await fetch('https://api.opendota.com/api/heroStats')
    console.log(response)
    const data = await response.json()

    dispatch(getHeroesSuccess(data))
  } catch (error) {
    dispatch(getHeroesFailure())
  }
}

import * as actions from '../actions/heroesActions'
export const initialState = {
    heroes: [],
    loading: false,
    hasErrors: false,
}

export default function heroesReducer(state = initialState, action) {
    switch (action.type) {
        case actions.GET_HEROES:
            return { ...state, loading: true }
        case actions.GET_HEROES_SUCCESS:
            return { heroes: action.payload, loading: false, hasErrors: false }
        case actions.GET_HEROES_FAILURE:
            return { ...state, loading: false, hasErrors: true }
        default:
            return state
    }
}