0

Eu queria integrar essas duas API diferentes em um useState

const nomePaises = import.meta.env.VITE_PAISES_API_NOME;
const bandeiras = "node_modules/bandeiras/paises.json";

eu consegui inserir no component ListPaises.jsx, mas, só aparece uma lista de cada API e não as duas, toda vez que dou um F5, fica trocando entre um e outro na web

const nomePaises = import.meta.env.VITE_PAISES_API_NOME;
const bandeiras = "node_modules/bandeiras/paises.json";

const [paises, setPaises] = useState([]);

  const getPaises = async (url) => {
    const res = await fetch(url)
    const data = await res.json();

   setPaises(data);
  }

  useEffect(() => {

    const nomeURL = `${nomePaises}`
    const bandeirasURL = `${bandeiras}`

    getPaises(nomeURL);
    getPaises(bandeirasURL);
  }, [])
 return (
    <div className="panel">

      <div className="component-list">

        <div className="component-list-detail flex">
            <h2>Países</h2>

            <div className="list2 flex">
              <h2>Economia</h2>
              <h2>Localização(continente)</h2>
            </div>
        </div>

          {
            paises.length > 0 &&
            paises.map((pais) => <ListPaises pais={pais}/>)
          }


        </div>

    </div>
  )

Queria encontrar alguma outra maneira de colocar as duas API, e estou usando REACT

1 Resposta 1

0

Você esta sobrescrevendo o paises na função getPaises

Quando executa a linha getPaises(nomeURL); a função armazena em paises vindo do nomeURL Na linha abaixo, quando executa getPaises(bandeirasURL); a função sobrescreve o paises colocando o que vem de bandeirasURL

Sugiro que você transforme a função getPaises para retornar o valor e criar dois states, um para bandeiras e outro para paises. Algo assim:

const nomePaises = import.meta.env.VITE_PAISES_API_NOME;
const nomeBandeiras = "node_modules/bandeiras/paises.json";

const [paises, setPaises] = useState([]);
const [bandeiras, setBandeiras] = useState([]);

const getPaises = async (url) => {
  const res = await fetch(url);
  const data = await res.json();

  return data;
};

useEffect(() => {
  let paisesData = getPaises(nomePaises);
  let bandeiraData = getPaises(nomePaises);

  setPaises(paisesData);
  setBandeiras(bandeiraData);
}, []);
return (
  <div className="panel">
    <div className="component-list">
      <div className="component-list-detail flex">
        <h2>Países</h2>

        <div className="list2 flex">
          <h2>Economia</h2>
          <h2>Localização(continente)</h2>
        </div>
      </div>

      {paises.length > 0 && paises.map((pais) => <ListPaises pais={pais} />)}
      {bandeiras.length > 0 &&
        bandeiras.map((bandeira) => <ListPaises pais={bandeira} />)}
    </div>
  </div>
);

Se ainda assim seu desejo for colocar os dois e um único state, você vai precisar usar a função concat para juntar os dois, antes de colocar no state.

Você deve fazer log-in para responder a esta pergunta.

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