Javascript 无法映射此.props（值显示为未定义或空数组）

我已经设置了react/redux，这样当组件装载时，它将呈现信息。当我控制台记录this.props.heros.data时，我得到一个值

[{id:1，heroname:'Batman'，realname:'Bruce Wayne'}，{id:2，heroname:'Nightwing'，realname:'Richard Grayson'}]

。当我尝试映射

this.props.hero.data

时，我得到一条

未定义的
语句，
控制台.log
变成一个空数组

我的堆栈是React、Redux、Express、PostgreSQL

我试着使用这个.props.heroes做了一些控制台日志，并且能够使用空数组从完全未定义到未定义

我的英雄组件页面：

class AllHeroes extends Component {
  async componentDidMount() {
    await this.props.getHeroes();
  }
  render() {
    const heroes = this.props.heroes;
    console.log("heroesreal", heroes);
    console.log(typeof heroes);
    if (!this.props.heroes) return "LOADING";
    else {
      return (
        <div>
          <h1>Placeholder</h1>
          {heroes.data.map(hero => {
            return <div key={hero.id}>{hero.heroname}</div>;
          })}
        </div>
      );
    }
  }
}

const mapStateToProps = state => ({ heroes: state.heroes });
const mapDispatchToProps = dispatch => ({
  getHeroes: () => dispatch(getHeroes())
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(AllHeroes);

我不相信我有任何商店连接问题，因为我之前有一个错误，我把一个供应商和商店放在我的顶级组件中修复了它

预期页面将呈现：
蝙蝠侠夜翼
，但未定义：[]
。提前感谢您的帮助
 您的减速器应该是这样的

const GOT_HEROES = "GOT_HEROES";

const gotHeroes = heroes => ({ type: GOT_HEROES, heroes });

export const getHeroes = () => async dispatch => {
  const { data } = await axios.get("/api/heroes");
  dispatch(gotHeroes(data));
};

const state = {
    heroes: []
}
const heroesReducer = (heroes = [], action) => {
  switch (action.type) {
    case GOT_HEROES:
      return { heroes: action.heroes , ...state };
    case DELETE_HERO:
      const heroId = action.id;
      const { heroes } = state
      newHeroes = heroes.filter(hero => hero.id !== heroId);
      return { heroes: newHeroes, ...state }
    default:
      return state;
  }
};

const combinedReducers = combineReducers({
  heroes: heroesReducer,
  villains: villainsReducer,
  hero: heroReducer
  // villain: villainReducer
});

这也是如何在单个reducer中添加更多数据的方法
请参考这些
您能发布完整的控制台日志吗？嗨！我尝试使用它，但现在我的控制台日志显示为未定义，因为现在它是一个空数组最初它将是一个空数组，因为我们将其初始化为空检查您的GOT_HEROES案例是否有新的英雄列表
const GOT_HEROES = "GOT_HEROES";

const gotHeroes = heroes => ({ type: GOT_HEROES, heroes });

export const getHeroes = () => async dispatch => {
  const { data } = await axios.get("/api/heroes");
  dispatch(gotHeroes(data));
};

const state = {
    heroes: []
}
const heroesReducer = (heroes = [], action) => {
  switch (action.type) {
    case GOT_HEROES:
      return { heroes: action.heroes , ...state };
    case DELETE_HERO:
      const heroId = action.id;
      const { heroes } = state
      newHeroes = heroes.filter(hero => hero.id !== heroId);
      return { heroes: newHeroes, ...state }
    default:
      return state;
  }
};

const combinedReducers = combineReducers({
  heroes: heroesReducer,
  villains: villainsReducer,
  hero: heroReducer
  // villain: villainReducer
});