与对象 JS / Next / React 的映射数组混淆

Question

编辑：重新编写问题以使其更清晰： 我有这样的数据，

[
  { 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'
    }
  ], ...etc it goes on for a while.

我正在尝试将它映射到这样的反应组件中：

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 不是函数的错误，因为在第一个映射之后，嵌套映射只是一个包含一个对象而不是多个数组的数组，但我不知道如何绕过它。

编辑：已修复 :) 这是新组件：

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>
          Score:
          <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>
      Win Rate: {teams[0].winrate}%{pokemap}
    </div>
  );
};

Answer 1

由于您的数据包含对象和数组，因此您需要在第一个迭代级别内检查当前项是否为数组，并且在这种情况下仅调用 map()：

{Array.isArray(team) && 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>
))}