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에 중단 점을 설정하고 호출 스택이 무엇인지 확인해 봤습니까? 왜 두 번 전화가 걸리는지/방법을 알려줍니다. –

componentWillMount에서 상점을 직접 호출하지 말고 조치를 사용해야합니다.

출처

2016-06-07 15:53:33

Reflux.js + React.js 트리거 결과가 잘못되었습니다.

답변

관련 문제