-2

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>
  );
}
2
  • Por favor, edite a pergunta para limitá-la a um problema específico com detalhes suficientes para identificar uma resposta adequada.
    – Comunidade Bot
    Commented 9/04/2022 às 10:04
  • você pensou em fazer um if !== null ?
    – Maiky
    Commented 9/04/2022 às 12:22

1 Resposta 1

0

Essa execução irá depender do retorno da sua API quando não existe imagem em um determinado veículo. Se ela retorna um array vazio [], nulo ou simplesmente não retorna o atributo.

Para esses casos você poderia apenas validar com um ternário se o campo acessado é realmente um array:

{(veiculos).map((veiculo) => (
  <VeiculoCard
    imagem={Array.isArray(veiculo.imagens) ? veiculo.imagens.map((img) => img.url) : []}
  />
))}

Ou, caso a propriedade simplesmente não venha quando não existe nenhuma imagem ou retorne null, validar a existência da mesma antes de executar o map.

{(veiculos).map((veiculo) => (
  <VeiculoCard
    imagem={veiculo.imagens?.map((img) => img.url)}
  />
))}

Espero ter ajudado!

2
  • 1
    funcionou obrigado! Commented 9/04/2022 às 16:18
  • Por nada, que bom que funcionou! Commented 24/12/2022 às 19:19

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .