Reflux.js + React.js Trigger-Ergebnis ist falsch

Question

Ich versuche, eine dynamische NavBar mit reagieren und Rückfluss holen zu erstellen.

Dies ist meine Handlungen Datei:

var Reflux = require('reflux'); 

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

    module.exports = SubMenuActions; 

Meine Speicher-Datei:

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; 

Meine http-Methode:

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

Und die letzten, meine navitem Datei, in dem Trigger eingefangen:

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; 

Das Problem ist, dass, wenn ich das Ergebnis von "console.log (Elemente)" überprüfen, die bei onChange Methode ich jedes Ergebnis zweimal erhalten, als ob Trigger-Methode zweimal ausgelöst wurden.

Deshalb kann ich meine Navbar nicht vollständig korrigieren.

Weiß jemand über dieses Problem? Bitte helfen Sie mir!

Answer 1

In ComponentWillMount sollten Sie eine Aktion verwenden, nicht den Speicher direkt aufrufen.