Question

我正在尝试在reactjs的数组中有效地进行键值浏览。

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

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的跨度中显示它。

谢谢！

Answer 1

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

我建议您使用另一种格式。这样，仅用一张地图即可渲染图像和俱乐部名称。

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

Answer 2

传递给map函数的第二个参数是索引，您可以使用它来读取正确的key。

const IconosSeccion = () => (
  <div className="containerIconosSeccion">
    <div className="parentIconos" />
    {equipos.map(equipo => (
      <div>
        {equipo.images.map((image, index) => (
          <div className="backgroundIconoIndependiente">
            <img alt="#" className="iconoIndependiente" src={image} />
            <span className="textoIconoIndependiente">{equipo.key[index]}</span>
          </div>
        ))}
      </div>
    ))}
  </div>
);

Answer 3

使用第二个参数索引map，以获取正确的图像和键。

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

            <span className="textoIconoIndependiente">{ equipo.key[i] }</span>
          </div>
      </div>
    )}
  </div>
);

如何遍历React.js中的键值

3 个答案: