ComponentWillMount触发器不会停止？

Question

首先，我是React的新手，这是我的第一个项目。

我正在创建一个基本的博客应用，我的app类如下：

var App = React.createClass({

    getInitialState: function () {
        return {
            posts: Store.getPosts(),
            newPost: {
                headerText: '',
                bodyText: ''
            }
        };
    },

    componentWillMount: function () {
        console.info("App component will mount")
        Store.addChangeListener(this.changeState);
    },

    componentWillUnmount: function () {
        Store.removeChangeListener(this.changeState);
    },

    componentDidMount: function() {
        console.info("App component mounted.")
        Store.removeChangeListener(this.changeState);
    } ,

    changeState: function () {
        this.setState({
            posts: Store.getPosts()
        });
    },

当我的应用运行componentWillMount方法时触发并调用this.changeState方法，并从flux store调用Store.getPosts()方法。

但这件事并没有停止。从服务器连续调用xhr请求。应用程序启动时，我的网络控制台就像这样。

我尝试添加componentDidMount来解决此问题，但在这种情况下，在应用启动时，不会从服务器收到帖子。

我希望只有一次在应用启动时加载所有帖子，然后在我调用setState方法时运行。

Answer 1

可疑的是 changeState 功能。你使用什么焊剂实施？通常应该看起来像：

   changeState: function (state) {
    this.setState(state);
   }

通常，您可以与商店进行交互，无需直接调用任何方法即可执行操作并侦听商店更改。

Answer 2

你一次又一次打电话，所以你的商店应该有像

这样的方法

 var _post={};
  getDataonly:function()
    {
      return _post;
    },

你必须创建一个能够处理状态变化的函数，并在需要时调用该函数

function setpostState()
{
 return
  {
   post:Store.getPost()
 }
}

当你从api获得数据时必须设置这个变量

  $.ajax({
    type: "GET",
    url : config.serviceURL + "/posts"
  })
      .then(function successCallback(res) {
        if(!res.error) {
          that.posts = res.data;
          _post=res.data;
          that.emitChange();
        } else console.error(res.message);
      })

并且你的main.js changeState方法应该是

  changeState: function () {
    this.setState(setpostState());
},