Básicamente cargo mi página de inicio y uno de mis componentes es el siguiente:
import React, {Component} from 'react'; class BlogPostsWidget extends Component { render() { $.ajax({ type: "GET", url: 'https://example.com/wp-json/wp/v2/posts?filter[orderby]=asc&filter&per_page=3&categories=1,2,3,11,258,378,447', dataType: 'json', success: function(data) { data.forEach(function(post) { $( '.blog__body' ).append( '<div class="col-md-4"><div class="blog__body__article"><a target="_blank" href="' + post.link + '"><img class="card-img-top img-responsive lazy" src="' + post.ccw_thumbnail + '"></a><h2 class="bold text-center card-title">' + post.title.rendered + '</h2><div class="short-border"></div>' + post.excerpt.rendered + '<a target="_blank" class="black-link" href="' + post.link + '">READ MORE <i class="fa fa-chevron-right"></i></a></div>' ); }); } }); return ( <div className="blog"> <div className="blog__body"> </div> </div> ); } } export default BlogPostsWidget; En la carga de la página inicial, todo funciona bien. Sin embargo, si hago clic en mi logotipo para volver a renderizar mi página de inicio, mi llamada Ajax se dispara de nuevo, lo que hace que se carguen las mismas 3 publicaciones de blog después de las que ya están renderizadas.
¿Cómo me aseguro de que mi script Ajax se ejecute solo una vez?
Use el método del ciclo de vida componentDidMount y coloque la llamada ajax dentro de eso. Se llamará solo una vez justo después de la representación del componente.
Del DOC :
componentDidMount() se invoca inmediatamente después de montar un componente. La inicialización que requiere nodos DOM debe ir aquí. Si necesita cargar datos desde un extremo remoto, este es un buen lugar para instanciar la solicitud de red.