I'm trying to create a dynamic NavBar
with react and reflux fetch.
This is my actions file:
var Reflux = require('reflux');
var SubMenuActions = Reflux.createActions([
'getSubItems'
]);
module.exports = SubMenuActions;
My store file:
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;
My http method:
getSubItems: function(url){
return fetch(url)
.then(function(response){
return response.json();
});
}
And the last one, my navitem file where trigger is catched:
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;
The problem is that when I check the result of "console.log(items)" that is at onChange
method I receive each result twice, as if trigger method were triggered twice.
That's why I cannot have my navbar completely correct.
Does someone know about this problem?? Please help me!
In componentWillMount you should be using an action, not calling the store directly.