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.
