Redux和React未定义'map'

由 发布于 javascriptreduxreactjs
 收藏

收到一个奇怪的错误，其中“地图”未定义。我不确定我的函数是否在错误的时间触发，导致没有数据被接收。

我正在将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)

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 function fetchHeroes() {
  return async dispatch => {
    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())
    }
  }
}
评论