javascript - 每次在页面重新加载重复内容时加载 Ajax 调用

Question

基本上我加载了我的主页，我的组件之一如下:

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;

在初始页面加载时一切正常。但是，如果我单击我的 Logo 以重新呈现我的主页，我的 Ajax 调用将再次触发，导致在我已经呈现的博客文章之后加载相同的 3 篇博客文章

如何确保我的 Ajax 脚本只运行一次？

Answer 1

使用componentDidMount 生命周期方法，并将ajax 调用放入其中。它只会在组件渲染后被调用一次。

来自 DOC :

componentDidMount() is invoked immediately after a component is mounted. Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request.