javascript - Confusion with mapping arrays of objects JS / Next / React

Question

Edit: re-wrote question to make it cleaner: I have data like this,

[
  { 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.

I'm trying to map it in a react component like this:

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;

I get the error that the nested team.map is not a function, because after the first map, the nested map is just an array containing an object instead of multiple arrays but I have no idea how to get around it.

EDIT: FIXED :) Here's the new component:

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>
  );
};

标签： javascriptreactjs

Answer 1

Since your data contains both objects and arrays you need to check within the first iteration level if the current item is an array and only call map() in that case:

{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>
))}