Question

我附上了一张图片，您可以在其中查看我要渲染的状态中的数据


    <Hero>
              {HeroesInfo.map((hero) => (
                <HeroCards
                  name={hero.localized_name}
                  type={hero.attack_type}
                  key={hero.id}
                  legs={hero.legs}
                  img={hero.img}
                  icon={hero.icon}
                />
              ))}
            </Hero>

这里对于数组中存在的每个对象，我想传递这个名为 HeroCards 的组件，它工作正常。但是，您可能会看到那里有一系列“角色” 我尝试使用此逻辑将其呈现出来 =

{HeroesInfo.roles.map((data) => ( <h1>for each role <h1>))}

但这给了我一个无法映射未定义的错误:( 我正在学习 redux 所以这是我的 reducer 现在我的状态


    const initState = {
      HeroesInfo: [],
      GamesUpcoming: [],
      GamesOld: [],
      GamesType: [],
      HeroesInfo2: [],
    };
    const HInfoReducer = (state = initState, action) => {
      switch (action.type) {
        case "FETCH_HEROES":
          return {
            ...state,
    
            HeroesInfo: action.payload.HeroesInfo,
            HeroesInfo2: action.payload.HeroesInfo2,
            GamesUpcoming: action.payload.GamesUpcoming,
          };
    
        default:
          return { ...state };
      }
    };
    export default HInfoReducer;

Answer 1

听起来您需要这样做：

{HeroesInfo.map((hero) => hero.map((data) => ( <h1>for each role <h1>)))}

或者如果它是卡片的一部分？然后需要在

中传递角色

<HeroCards
     name={hero.localized_name}
     type={hero.attack_type}
     key={hero.id}
     legs={hero.legs}
     img={hero.img}
     icon={hero.icon}
     roles={hero.roles}
/>

然后在卡片中做：

{roles.map((role) => <h1>for each role</h1>)}

无法在我的状态数据中渲染出数组

1 个答案: