Javascript Ajax调用每次在页面上加载重新加载复制内容

基本上，我加载了我的主页，其中一个组件如下所示：

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;

import React，{Component}来自'React'；
类BlogPostsWidget扩展组件{
render（）{
$.ajax({
键入：“获取”，
网址：'https://example.com/wp-json/wp/v2/posts?filter[orderby]=asc&filter&per_page=3&categories=1,2,3,11258378447'，
数据类型：“json”，
成功：功能（数据）{
data.forEach（函数（post）{
$（'.blog__body'）。追加（''+post.title.rendered+''+post.extract.rendered+''）；
});
}
});
返回(
);
}
}
导出默认blogspostswidget；

在初始页面加载时，一切正常。但是，如果我点击我的logo重新呈现我的主页，我的

Ajax

调用将再次触发，导致相同的3篇博客文章在我已经呈现的文章之后被加载

---

如何确保我的

Ajax

脚本只运行一次？

使用

componentDidMount

生命周期方法，并将Ajax调用放入其中。仅在组件渲染后调用一次

发件人：

componentDidMount（）在创建组件后立即调用 安装。需要DOM节点的初始化应该在这里进行。如果你 需要从远程端点加载数据，这是一个好地方 实例化网络请求