Uncaught TypeError: Cannot read properties of undefined (reading 'map')

[renanluizssx]

import Container from "react-bootstrap/esm/Container";
import Row from "react-bootstrap/esm/Row";
import Col from "react-bootstrap/esm/Col";
import Navegacao from "../../Componentes/Navegacao";
import HeaderBiografia from "../../Componentes/Header";
import NavegacaoHeader from "../../Componentes/NavegacaoHeader";
import * as React from "react";
import Tendencias from "../../Componentes/Tendencias";
import "./secao-famosos.css";
import DadosArtistas from "../../Componentes/CaixasArtistas";
import { useState, useEffect } from "react";

function SecaoFamosos() {
  const [dados, setDados] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch("./ColecaoDeDados/ColecaodeDados.json", {
          headers: {
            Accept: "application/json",
          },
        });

        if (response.ok) {
          const data = await response.json();
          setDados(data);
        } else {
          throw new Error("Erro ao carregar os dados");
        }
      } catch (error) {
        console.error("esse foi o erro:", error);
      }
    };

    fetchData();
  }, []);

  const dadosArtistasAmigosEFamilias = dados.amigosEFamilias;
  const dadoArtistaAmor = dados.amor;
  const dadosArtistasInfluencias = dados.influencias;
  const dadoParceria = dados.parcerias;
  const dadosArtistasSemelhantes = dados.semelhantes;
  {
    console.log(dados);
  }
  return (
    <Container fluid className="text-light">
      <Row className="justify-content-center">
        <Navegacao Row={Row} Col={Col} />
        <Col
          xs={12}
          sm={12}
          md={9}
          lg={9}
          xl={9}
          xxl={9}
          className="m-5 pb-4 rounded-3"
        >
          <HeaderBiografia Row={Row} Col={Col} />
          <NavegacaoHeader Row={Row} Col={Col} />
          <main className="mw-100 ms-2">
            <Row
              className="
            mt-5 flex-column flex-sm-row-reverse  
            align-items-center align-items-sm-start align-items-md-start
             align-items-lg-start align-items-xl-start align-items-xxl-start 
             justify-content-center"
            >
              <Col xs={12} sm={6} md={6} lg={6} xl={6} xxl={6}>
                <Tendencias Row={Row} Col={Col} />
              </Col>
              <Col xs={7} sm={6} md={6} lg={6} xl={6} xxl={6}>
                <h2 className="fs-1 text-center mb-5 mb-sm-5 d-none">
                  Famosos Próximos
                </h2>

                <Row className="justify-content-center">
                  <Col xs={12} sm={12} md={12} lg={6} xl={6} xxl={6}>
                    <div>
                      <h3 className="fs-3 text-center">Semelhantes</h3>

                      {dadosArtistasSemelhantes.map((artista, id) => (
                        <DadosArtistas
                          key={id}
                          imagem={artista.imagem}
                          nome={artista.nome}
                        />
                      ))}

                      <h3 className="fs-3 text-center mt-5">Influências</h3>
                      {dadosArtistasInfluencias.map((artista, id) => (
                        <DadosArtistas
                          key={id}
                          imagem={artista.imagem}
                          nome={artista.nome}
                        />
                      ))}
                    </div>
                  </Col>

                  <Col
                    xs={12}
                    sm={12}
                    md={12}
                    lg={6}
                    xl={6}
                    xxl={6}
                    className="d-flex flex-column"
                  >
                    <h3 className="fs-3 text-center">Parcerias</h3>
                    <DadosArtistas
                      imagem={dadoParceria.imagem}
                      nome={dadoParceria.nome}
                    />
                    <h3 className="fs-3 text-center mt-5">Amigos/Familias</h3>
                    {dadosArtistasAmigosEFamilias &&
                      dadosArtistasAmigosEFamilias.map((artista, id) => (
                        <DadosArtistas
                          key={id}
                          imagem={artista.imagem}
                          nome={artista.nome}
                        />
                      ))}
                    <h3 className="fs-3 text-center mt-5">Amor</h3>
                    <DadosArtistas
                      imagem={dadoArtistaAmor.imagem}
                      nome={dadoArtistaAmor.nome}
                    />
                  </Col>
                </Row>
              </Col>
            </Row>
          </main>
        </Col>
      </Row>
    </Container>
  );
}
export default SecaoFamosos;

Good afternoon, I looked for an api via json and when I put it in a state, and I print this state variable, it says as if it were empty, and in the json response it comes as an object normally, but when I put it in a state variable and I call it right below it says it doesn’t exist, is there any solution?

[zaklina]

useEffect(() => {
  const fetchData = async () => {
    try {
      const response = await fetch("./ColecaoDeDados/ColecaodeDados.json", {
        headers: {
          Accept: "application/json",
        },
      });

      if (response.ok) {
        const data = await response.json();
        setDados(data);
        console.log(data); // Move the console.log here
      } else {
        throw new Error("Erro ao carregar os dados");
      }
    } catch (error) {
      console.error("esse foi o erro:", error);
    }
  };

  fetchData();
}, []);

// Remove the console.log(dados) from here

moving the console.log(data) inside the if block where you set the state, you ensure that the log statement occurs after the state has been updated with the fetched data. This should help you see the actual data in the console.

[ArielLeslie]

setState is an asynchronous function. If you access the state variable right after setting it, it might not have updated yet.