React+Redux开发中无法渲染State内数组中的roles子数组问题求助

咱们先把问题根源揪出来：你现在尝试直接对HeroesInfo.roles执行map操作，但HeroesInfo是整个英雄对象数组，不是单个英雄对象，所以HeroesInfo.roles必然是undefined，这就是报错的核心原因。

正确的遍历姿势 #

你需要在遍历每个hero的循环内部，去处理当前单个英雄对象的roles子数组。修改你的<Hero>组件代码如下：

<Hero> 
  {HeroesInfo.map((hero) => ( 
    <div key={hero.id}>
      <HeroCards 
        name={hero.localized_name} 
        type={hero.attack_type} 
        legs={hero.legs} 
        img={hero.img} 
        icon={hero.icon} 
      />
      {/* 在这里处理当前英雄的roles子数组 */}
      {hero.roles?.map((role) => (
        <h1 key={role}>{role}</h1>
      ))}
    </div>
  ))} 
</Hero>

关键细节解释 #

1. 用可选链?.做安全防护：
   考虑到可能存在某个英雄对象没有roles字段的情况，hero.roles?.map()会先检查hero.roles是否存在且不为undefined/null，只有符合条件才会执行map，否则直接返回undefined，不会触发报错。

2. 给子元素加唯一key：
   和遍历HeroesInfo时需要key一样，遍历roles时也要给每个生成的元素加唯一标识（这里用role本身作为key，假设每个角色名称都是唯一字符串），符合React的列表渲染规范。

3. 兼容初始空数组状态：
   你的Redux初始状态里HeroesInfo是空数组，在异步请求返回数据前，HeroesInfo保持为空，但map在空数组上执行是安全的，不会报错；而?.则能处理单个英雄roles字段缺失的情况。

额外优化方案 #

如果想让代码结构更清晰，也可以把roles作为props传递给HeroCards组件，让它自己负责渲染角色信息：

// 在父组件中传递roles
<HeroCards 
  name={hero.localized_name} 
  type={hero.attack_type} 
  legs={hero.legs} 
  img={hero.img} 
  icon={hero.icon}
  roles={hero.roles} 
/>

然后在HeroCards组件内处理：

function HeroCards({ name, type, legs, img, icon, roles }) {
  return (
    <div className="hero-card">
      {/* 原有组件内容 */}
      <div className="hero-roles">
        {roles?.map((role) => (
          <span key={role} className="role-tag">{role}</span>
        ))}
      </div>
    </div>
  )
}

这样更符合组件职责分离的原则，让每个组件只专注自己的部分逻辑。

内容的提问来源于stack exchange，提问作者Manshul Duggal