Я пытаюсь эффективно провести тур по ключу-значению в массиве в 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.info(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.
Спасибо!
Думаю, так ваша модель была бы более внятной const equipos = [{key: 'Real Madrid', image: '...' }, {key : 'Manchester United' , image: '...'} ]



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Второй аргумент, передаваемый функции 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>
);
Используйте второй параметр для map, index, чтобы получить правильное изображение и ключ.
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>
);
Я не уверен, что ваши данные правильно отформатированы.
Я предлагаю вам другой формат. Таким образом, можно отобразить ваше изображение и название клуба только с одной картой.
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>
);
Передайте индекс в функции карты, а затем вы можете дать
src = {images[index]}, должно работать, я думаю