0
159
VisualizaçõesProblemas para mapear una matriz de datos a imágenes en React
Tengo un mapa que se ve así
Estoy usando .map() para tratar de producirlos como imágenes así:
{theLinks.map((item, indx) => ( <img key={indx} src={item.src} alt={item.label} /> ))}No se devuelve nada, si me meto con eso, puedo obtener una sola imagen para devolver sin una fuente válida y el alt es "desconocido".
·
Juan Pablo Isaza
2 Respostas
Responde à pergunta0
asegúrese de agregar su matriz mapeada theLinks después o dentro de una función de return ,
por ejemplo, esto NO funcionará :
export default function App() { const theLinks = [ { lable: "Daily Mix", src: "https://flif.info/example-images/fish.png" }, { lable: "Legit", src: "https://flif.info/example-images/fish.png" }, { lable: "SCL", src: "https://flif.info/example-images/fish.png" } ]; {theLinks.map((item, indx) => ( <img style={{ width: "50%", border: "1px solid #ccc" }} key={indx} src={item.src} alt={item.label} /> ))} } SOLUCIÓN 1
esto funcionará (representa la matriz mapeada y otros elementos también):
export default function App() { const theLinks = [ { lable: "Daily Mix", src: "https://flif.info/example-images/fish.png" }, { lable: "Legit", src: "https://flif.info/example-images/fish.png" }, { lable: "SCL", src: "https://flif.info/example-images/fish.png" } ]; return ( <> <h1> thanks Phil for your suggestion! </h1> {theLinks.map((item, indx) => ( <img style={{ width: "50%", border: "1px solid #ccc" }} key={indx} src={item.src} alt={item.label} /> ))} ; </> ); } SOLUCIÓN 2
esto funcionará (representa solo la matriz asignada)
export default function App() { const theLinks = [ { lable: "Daily Mix", src: "https://flif.info/example-images/fish.png" }, { lable: "Legit", src: "https://flif.info/example-images/fish.png" }, { lable: "SCL", src: "https://flif.info/example-images/fish.png" } ]; return theLinks.map((item, indx) => ( <img style={{ width: "50%", border: "1px solid #ccc" }} key={indx} src={item.src} alt={item.label} /> )); }
·
Juan Pablo Isaza
Relatório
0
Prueba esto
{theLinks.map((item, indx) => { return ( <img key={indx} src={item.src} alt={item.label} /> ); })}
·
Juan Pablo Isaza
Relatório
Responde à pergunta