Tenho um json que chega da minha api como esse exemplo: obs: "imagens" é um array de objetos
[
{
"_id": "625112d17123e250ecfe9d09",
"modelo": "corola",
"marca": "toyota",
"ano": 2020,
"preco": 100000,
"imagens": [
{
"key": "ccbc1c54f037.jpeg",
"url": "https://vcars.s3.amazonaws.com/ccbc1c54f037.jpeg"
},
{
"key": "1e3b9259f338.jpeg",
"url": "https://vcars.s3.sa-east-1.amazonaws.com/1e3b9259f338.jpeg"
},
{
"key": "58732b07f66f.jpeg",
"url": "https://vcars.s3.sa-east-1.amazonaws.com/58732b07f66f.jpeg"
}
],
},
meu frontend React recebe esse array e preciso retornar um card para cada objeto do array 'um veiculo' ... estou fazendo da seguinte forma: {(veiculos).map((veiculo) => (
e passando as propriedades, já em imagens como é um array de objetos dentro do objeto veiculos,
imagem={veiculo.imagens.map((url) => url.url)}
até aqui funciona perfeitamente, o problema está quando não tem nenhuma imagem dentro de "imagens" no console da erro: Uncaught TypeError: Cannot read properties of undefined (reading 'map')
alguma solução? ou então alguma outra forma melhor de fazer isso?
import { useState, useEffect } from "react";
import { Container, Row } from "react-bootstrap";
import VeiculoCard from "../components/VeiculoCard";
export default function Veiculos() {
const [veiculos, setVeiculos] = useState([]);
useEffect(() => {
fetch("http://localhost:4000/veiculos", {
method: "GET",
headers: { "Content-Type": "application/json" },
})
.then((resp) => resp.json())
.then((data) => setVeiculos(data))
.catch((err) => console.log(err));
}, []);
return (
<div>
<Container>
<Row xs={1} md={2} lg={3} xl={4}>
{(veiculos).map((veiculo) => (
<VeiculoCard
key={veiculo._id}
modelo={veiculo.modelo}
marca={veiculo.marca}
ano={veiculo.ano}
preco={veiculo.preco}
imagem={veiculo.imagens.map((url) => url.url)}
/>
))}
</Row>
</Container>
</div>
);
}