javascript - 如何在reactjs中遍历key-value

Question

我正在尝试在 reactjs 的数组中高效地进行键值对之旅。

但是，我不知道如何在不创建另一个 map 函数的情况下显示“键”数组。

const equipos = [
  {
    key: [
      'Real Madrid',
      'Manchester United',
      'Champions League',
      'English Premier League',
      'Bayern Munchen',
      'Juventus',
      'Arsenal',
    ],
    images: [
      'http://as00.epimg.net/img/comunes/fotos/fichas/equipos/large/1.png',
      'https://4.bp.blogspot.com/_Z_YWTFNHUvw/TQDBKNXdwcI/AAAAAAAACI0/COhwIG2PkFA/s320/Manchester-United%255B1%255D.png',
      'http://www.stickpng.com/assets/images/5842fe06a6515b1e0ad75b3b.png',
      'https://i.pinimg.com/originals/f1/44/fc/f144fc61d0b0ed7716d740aa9deefb07.png',
      'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/FC_Bayern_M%C3%BCnchen_logo_%282017%29.svg/1200px-FC_Bayern_M%C3%BCnchen_logo_%282017%29.svg.png',
      'http://as00.epimg.net/img/comunes/fotos/fichas/equipos/large/29.png',
      'https://i.pinimg.com/originals/98/32/8b/98328b1d64c5f93ef5eceea7586430d1.png',
    ],
  },
];

console.log(equipos.images)

const IconosSeccion = () => (
  <div className="containerIconosSeccion">
    <div className="parentIconos" />
    {equipos.map(equipo => (
      <div>
        {equipo.images.map(image => (
          <div className="backgroundIconoIndependiente">
            <img alt="#" className="iconoIndependiente" src={image} />

            <span className="textoIconoIndependiente">Real madrid</span>
          </div>
        ))}
      </div>
    ))}
  </div>
);

我想在类名 textIconoIndependiente 的 span 中显示它。

谢谢!

Answer 1

我不确定您的数据格式是否正确。

我建议您使用另一种格式。这样，就可以只用一张 map 渲染你的形象和俱乐部的名字。

const equipos = [
      {name:'Real Madrid',image:'http://as00.epimg.net/img/comunes/fotos/fichas/equipos/large/1.png',},
      {name:'Manchester United',image:'https://4.bp.blogspot.com/_Z_YWTFNHUvw/TQDBKNXdwcI/AAAAAAAACI0/COhwIG2PkFA/s320/Manchester-United%255B1%255D.png',},
      {name:'Champions League',image:'http://www.stickpng.com/assets/images/5842fe06a6515b1e0ad75b3b.png',},
      {name:'English Premier League',image:'https://i.pinimg.com/originals/f1/44/fc/f144fc61d0b0ed7716d740aa9deefb07.png',},
      {name:'Bayern Munchen',image:'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/FC_Bayern_M%C3%BCnchen_logo_%282017%29.svg/1200px-FC_Bayern_M%C3%BCnchen_logo_%282017%29.svg.png',},
      {name:'Juventus',image:'http://as00.epimg.net/img/comunes/fotos/fichas/equipos/large/29.png',},
      {name:'Arsenal',image:'https://i.pinimg.com/originals/98/32/8b/98328b1d64c5f93ef5eceea7586430d1.png'}
];

const IconosSeccion = () => (
  <div className="containerIconosSeccion">
    <div className="parentIconos" />
    {equipos.map(equipo => (
      <div>
          <div className="backgroundIconoIndependiente">
            <img alt="#" className="iconoIndependiente" src={equipo.image} />

            <span className="textoIconoIndependiente">{equipo.name}</span>
          </div>
      </div>
    ))}
  </div>
);