Get request chamando multiplas vezes | React | Alura

Tenho o seguinte código, visualmente ele funciona bem. Consome minha api e faz um foreach. Porém acontece que ele faz pelo menos 2 chamadas iguais pra mesma API, trazendo dados duplicados. Por algum motivo o REACT tá chamando 2 vezes sempre

import $ from 'jquery';

var response;
var posts = []

function Posts() {
    response = $.ajax({
        type: "GET",
        url: 'http://localhost:8000/api/posts',
        async: false
      }).responseJSON;

    response.forEach((post) => {
        posts.push(
            <div className="col-12 col-md-4 mt-3">
                <h2>{post.title}</h2>
                <a className="link link-noUnderline" target="_blank" href={"http://localhost:8000/api/posts/"+post.id}>Read more...</a>
            </div>
        )
    })

    return (
        <section id="posts" className="container mt-5">
            <h1 className="posts-title text-center">Posts</h1>
            <div className="row text-center">
                {posts}
            </div>
        </section>
    );
}

export default Posts;

Oi Lucas, tudo bem?

Desculpe a demora em retornar.

Muito obrigada por compartilhar seu código e sua dúvida conosco. É bastante comum em aplicações web precisar fazer múltiplas chamadas para uma API, mas é importante garantir que essas chamadas sejam feitas de forma eficiente e sem redundância. Vamos ver como podemos resolver seu problema de chamadas duplicadas.

Uma das possibilidades é usar o useEffect, um hook do React que permite executar efeitos colaterais em componentes funcionais, como fazer chamadas à API. Podemos definir uma função dentro do useEffect que será executada apenas uma vez, quando o componente for montado. Em seguida, essa função pode chamar a API e armazenar os dados em um estado do componente. Aqui está um exemplo:

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

function Posts() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await $.get('http://localhost:8000/api/posts');
      setPosts(response);
    };
    fetchData();
  }, []);

  return (
    <section id="posts" className="container mt-5">
      <h1 className="posts-title text-center">Posts</h1>
      <div className="row text-center">
        {posts.map(post => (
          <div key={post.id} className="col-12 col-md-4 mt-3">
            <h2>{post.title}</h2>
            <a className="link link-noUnderline" target="_blank" href={`http://localhost:8000/api/posts/${post.id}`}>Read more...</a>
          </div>
        ))}
      </div>
    </section>
  );
}

export default Posts;

Nesse exemplo, usamos o useState para armazenar o array de posts, inicialmente vazio. Em seguida, definimos o useEffect com um array vazio de dependências, o que significa que a função de busca de dados será executada apenas uma vez, quando o componente for montado. Essa função usa a função $.get do jQuery para buscar os dados na API e, quando a resposta chegar, atualiza o estado dos posts com setPosts.

Além disso, usamos a função map para percorrer o array de posts e criar os elementos HTML correspondentes. Note que usamos o atributo key na div que contém cada post, para que o React possa identificar cada elemento de forma única.

Outra possibilidade é usar uma biblioteca de gerenciamento de estados, como o Redux ou o MobX, para centralizar o estado dos dados da API e evitar chamadas duplicadas. Essas bibliotecas permitem criar um store global, que pode ser acessado por vários componentes, e definir actions e reducers para manipular o estado do store. Dessa forma, é possível garantir que uma chamada à API seja feita apenas quando os dados ainda não foram buscados, por exemplo.

Espero que essas sugestões te ajudem a resolver seu problema de chamadas duplicadas à API.

Um abraço e bons estudos.

Mergulhe em programação