JS/Next/React嵌套对象数组map渲染报错问题及解决方案

原始数据结构 #

[
  { winrate: '56.67' },
  [
    {
      bout: "Bout 5: Europe's  Qualifiers",
      wins: '2',
      role: 'Alternate'
    },
    {
      pokemon: 'Quagsire',
      sprite: 'https://thesilphroad.com/img/pokemon/icons/96x96/195.png'
    },
    {
      pokemon: 'Venusaur',
      sprite: 'https://thesilphroad.com/img/pokemon/icons/96x96/3.png'
    },
    {
      pokemon: 'Beedrill',
      sprite: 'https://thesilphroad.com/img/pokemon/icons/96x96/15.png'
    },
    {
      pokemon: 'Mawile',
      sprite: 'https://thesilphroad.com/img/pokemon/icons/96x96/303.png'
    },
    {
      pokemon: 'Escavalier',
      sprite: 'https://thesilphroad.com/img/pokemon/icons/96x96/589.png'
    },
    {
      pokemon: 'Mandibuzz',
      sprite: 'https://thesilphroad.com/img/pokemon/icons/96x96/630.png'
    }
  ],
  [
    {
      bout: "Bout 4: Europe's  Qualifiers",
      wins: '1',
      role: 'Alternate'
    },
    {
      pokemon: 'Quagsire',
      sprite: 'https://thesilphroad.com/img/pokemon/icons/96x96/195.png'
    },
    {
      pokemon: 'Ninetales_alolan',
      sprite: 'https://thesilphroad.com/img/pokemon/icons/96x96/ninetales-alola.png'
    },
    {
      pokemon: 'Beedrill',
      sprite: 'https://thesilphroad.com/img/pokemon/icons/96x96/15.png'
    },
    {
      pokemon: 'Sealeo',
      sprite: 'https://thesilphroad.com/img/pokemon/icons/96x96/364.png'
    },
    {
      pokemon: 'Jellicent',
      sprite: 'https://thesilphroad.com/img/pokemon/icons/96x96/593.png'
    },
    {
      pokemon: 'Venusaur',
      sprite: 'https://thesilphroad.com/img/pokemon/icons/96x96/3.png'
    }
  ],
  // 后续还有更多同类结构数据
]

初始错误代码 #

const Teams = ({ teams }) => {
  let pokemap = teams.map((team, index) => (
    <React.Fragment key={index}>
      <br />
      <div class="container">
        {team.map((pokemon) => (
          <React.Fragment key={pokemon.pokemon}>
            <br /> <div class="bout">{pokemon.bout}</div>
            <div class="child">
              <img src={pokemon.sprite} />
              <p>{pokemon.pokemon}</p>
            </div>
          </React.Fragment>
        ))}
      </div>
      <br />
    </React.Fragment>
  ));
  return (
    <div>
      {teams.role}
      {teams.winrate}
      {pokemap}
    </div>
  );
};

export default Teams;

报错原因 #

运行时抛出team.map is not a function错误，原因是外层数组的第一个元素是存储胜率的普通对象，不是数组，没有map方法，遍历到该元素时调用map直接报错。

修复后代码 #

const Teams = ({ teams }) => {
  console.log(teams);
  let pokemap = teams.slice(1).map((team, index) => (
    <React.Fragment key={index}>
      <br />{" "}
      <div class="container">
        <div class="bout">{team[0].bout}</div>{" "}
        <div>
          得分:
          <br />
          {team[0].wins && team[0].wins + "-"}
          {team[0].wins && 3 - team[0].wins}
        </div>
        <br />
        {Array.isArray(team) &&
          team.slice(1).map((pokemon) => (
            <React.Fragment key={pokemon.pokemon}>
              <div class="child">
                <img src={pokemon.sprite} />
                <p>{pokemon.pokemon}</p>
              </div>
            </React.Fragment>
          ))}
      </div>
    </React.Fragment>
  ));
  return (
    <div>
      胜率: {teams[0].winrate}%{pokemap}
    </div>
  );
};

核心修复点 #

• 外层遍历使用slice(1)跳过第一个胜率对象，只遍历后续的队伍数组
• 每个队伍数组的第一个元素为赛事信息，单独取出展示场次、胜负得分，不参与宝可梦列表遍历
• 宝可梦列表从队伍数组下标1开始遍历，新增Array.isArray(team)类型校验，避免边界场景报错
• 胜率直接从外层数组下标0的对象中取出展示

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