Reflux.js + React.js результат триггера неверен

Я пытаюсь создать динамический NavBar с помощью реакции и рефлюкс-выборки.Reflux.js + React.js результат триггера неверен

Это мои действия файла:

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;

Проблема заключается в том, что когда я проверяю результат «console.log (items)», который находится в методе onChange, я получаю каждый результат дважды, как если бы триггерный метод запускался дважды.

Вот почему я не могу полностью настроить свой навигатор.

Кто-нибудь знает об этой проблеме? Пожалуйста, помогите мне!

источник

2016-06-06 Juan Jose Ortiz

Я не понимаю вашего описания - ваш 'onChange' на самом деле вызывается дважды, или он вызывается один раз, но элементы дублируются? –

Извините, я думаю, что я не был таким ясным. onChange вызывается дважды –

Пробовали ли вы использовать отладчик для установки точки останова в onChange и посмотреть, что такое стек вызовов? Он может рассказать вам, почему/как его вызывают дважды. –

В компонентеWillMount вы должны использовать действие, а не напрямую обращаться к магазину.

источник

2016-06-07 15:53:33

Reflux.js + React.js результат триггера неверен

ответ

Смежные вопросы