[RESOLVIDO] Recuperar e rendenizar dados do Json em functional components do react

Front-end
#1

Pessoal, sou novo em React e preciso consumir os dados de uma Json, estou usando o axios para fazer a requisição, no entanto quando faço fetch usando o um state com useState entra em um loop infinito. Sei que quando seto um state ele rendeniza de novo o componente, mas qual a maneira correta de fazer o fetch nesse caso?

import React, { useState } from 'react';

import axios from 'axios';

function App() {

  const [genres, setGenres] = useState({});

  const [titles, setTitles] = useState({});

  function fetchData(){

    axios.all([

        axios.get('Json/genres.json'),

        axios.get('Json/titles.json')

    ])

    .then(axios.spread((genresRes, titlesRes)=>{         

        let genresData = genresRes.data

        let titlesData = titlesRes.data

        setGenres(genresData);

        setTitles(titlesData);

    })); 

  }

  function renderMenu(genres, titles){    

    fetchData();

    console.log(genres)

    // genres.map(item =>{

    //   return (

    //     <p>teste</p>

    //   )

    // })

  }

  return (

    <div>

      {renderMenu()}  

   </div>

  );

}

export default App;
#2

Você não deve consumir um serviço e ainda setar o state dentro do render, utilize uma função de ciclo de vida para isso

A função abaixo é executada apenas uma vez, exatamente quando o componente é criado

useEffect(() => {
  /*codigo aqui*/
}, []);

PS: Lembrar de importar useEffect de 'react'

#3

Certo, funcionou… inclusive o código ficou muito mais limpo rs. Só que olhando no console, como eu inicializo o state ‘genres’ com um objeto vazio, ao usar o map retorna este erro: TypeError: genres.map is not a function

import React, { useState, useEffect  } from 'react';

import axios from 'axios';

function App() {

  const [genres, setGenres] = useState({});

  const [titles, setTitles] = useState({});

  useEffect(() => {

    const fetchData = async () => {

      const result = await axios(

        'Json/genres.json',

      );

      setGenres(result.data);

    };

    fetchData();

  }, []);

  return (

    <div>

      {

       genres.map(item =>{

        console.log('teste')

      })

         }

   </div>

  );

}

export default App;
#4

É simples, é só trocar o {} do genres para [].

const [genres, setGenres] = useState([]);
const [titles, setTitles] = useState([]);
1 curtida
#5

Perfeito! funcionou, obrigado @rodriguesabner e @Mike e me desculpem pela “noobisse” haha

1 curtida