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;

在初始页面加载时一切正常。但是，如果我点击我的徽标重新渲染我的主页，我的Ajax电话会再次触发，导致在我已经渲染的帖子之后加载相同的3篇博文

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

Answer 1

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

来自DOC：

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

每次页面上的Ajax调用加载重新加载重复内容

1 个答案: