Reflux.js + React.js 触发结果错误

Question

我正在尝试创建一个具有反应和回流提取功能的动态 NavBar。

这是我的操作文件：

  var Reflux = require('reflux');

  var SubMenuActions = Reflux.createActions([
       'getSubItems'
  ]);

  module.exports = SubMenuActions;

我的商店文件：

 var Reflux = require('reflux');
 var SubMenuActions = require('../actions/SubMenuActions.jsx');
 var HTTP = require('../services/httpService.js');

 var SubMenuStore = Reflux.createStore({
 listenables: [SubMenuActions],
   getSubItems: function(urls){
   var promises = [];
   var thys = this;
   for(var i in urls){
     promises.push(HTTP.getSubItems(urls[i]));
   }
  Promise.all(promises).then(function(data){
    thys.trigger(data);
  });
  }
  });

  module.exports = SubMenuStore;

我的http方法：

  getSubItems: function(url){
    return fetch(url)
   .then(function(response){
     return  response.json();
   });
  }

最后一个，我捕获触发器的 navitem 文件：

var React = require('react');
var NavSubItem = require('./NavSubItem.jsx');
var SubMenuStore = require('../reflux/stores/SubMenuStore.jsx');
var Reflux = require('reflux');

var NavItem = React.createClass({
  mixins: [Reflux.listenTo(SubMenuStore, 'onChange')],
  getInitialState: function(){
    return{
      urls: this.props.urls,
      subItems: []
    };
  },
  componentWillMount: function(){
    SubMenuStore.getSubItems(this.state.urls);
  },
  onChange: function(items){
    console.log(items);
  },
  createNavSubItem: function(item, index){
    return <NavSubItem key={item + index} name={item.name}/>;
  },
  render: function(){
    return(
        <li className="menuLists dropdown">
           <a href="#"
              className="dropdown-toggle"
              data-toggle="dropdown"
              role="button"
              aria-haspopup="true"
              aria-expanded="false">{this.props.name}
              <span className="caret"></span>
            </a>
           <ul className="dropdown-menu">
            {this.state.subItems.map(this.createNavSubItem)}
          </ul>
        </li>
    );
  }
});

module.exports = NavItem;

问题是，当我检查 onChange 方法中 "console.log(items)" 的结果时，我收到每个结果两次，就好像触发方法被触发了两次一样。

这就是为什么我的导航栏不能完全正确的原因。

有人知道这个问题吗？？请帮助我！

Answer 1

在 componentWillMount 中你应该使用一个动作，而不是直接调用商店。

Reflux.js + React.js 触发结果错误

Reflux.js + React.js trigger result is wrong

reactjs

refluxjs