ReactJS循环executeAction

Question

我有两个反应与onAfterOpens像这样定义的情态动词：

import React from 'react'; 
import JobList from './JobList'; 
import RightPanel from './RightPanel'; 

import LoadJobsScreen from '../../actions/jobs-screen/LoadJobsScreen'; 
import UserStore from '../../stores/UserStore'; 
import LoadUsers from '../../actions/global/LoadUsers'; 
import LoadUsersByDepartment from '../../actions/global/LoadUsersByDepartment'; 
import Modal from 'react-modal'; 

export default class JobScreen extends React.Component { 

    static contextTypes = { 
     executeAction: React.PropTypes.func.isRequired, 
     getStore: React.PropTypes.func.isRequired 
    }; 

    componentWillMount() { 
     this.displayName = 'JobScreen' 
     this.state = { 
      traderModalOpened: false, 
      OFTModalOpened: false, 
      users: this.context.getStore(UserStore).getUsers(), 
     } 
     this.context.getStore(UserStore).on('change',() => { 
      this.setState({ 
       users: this.context.getStore(UserStore).getUsers() 
      }); 
     }); 
     this.context.executeAction(LoadJobsScreen, this); 
    } 

    toggleTraderModal() { 
     this.setState({ 
      traderModalOpened: !this.state.traderModalOpened 
     }); 
     console.log(this.state.traderModalOpened); 
    } 

    toggleOFTModal() { 
     this.setState({ 
      OFTModalOpened: !this.state.OFTModalOpened 
     }); 
     console.log(this.state.OFTModalOpened); 
    } 



    render() { 
     var users = []; 
     this.state.users.forEach((user) => { 
      users.push(
       <option value={user.id}>{user.firstName}</option> 
      ); 
     }); 
     return (
      <div className="jobs-screen"> 
       <div className="col-xs-12 col-sm-10 job-list" ><JobList toggleTraderModal={this.toggleTraderModal.bind(this)} toggleOFTModal={this.toggleOFTModal.bind(this)}/></div> 
       <div className="col-xs-12 col-sm-2 panel-container"> 
        <div className="right-panel pull-right"><RightPanel /></div> 
       </div> 
       <Modal 
        isOpen={this.state.traderModalOpened} 
        className="modal-dialog" 
        overlayClassName="modal show" 
        onAfterOpen={this.context.executeAction(LoadUsersByDepartment, 5)} 
        > 
        <div className="modal-content"> 
         <div className="modal-header"> 
          <button type="button" onClick={this.toggleTraderModal.bind(this)} className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
          <h4 className="modal-title">Set trader</h4> 
         </div> 
         <div className="modal-body"> 
          <select> 
           {users} 
          </select> 
         </div> 
         <div className="modal-footer"> 
          <button type="button" onClick={this.toggleTraderModal.bind(this)} className="btn btn-default" data-dismiss="modal">Close</button> 
          <button type="button" className="btn btn-primary">Save changes</button> 
         </div> 
        </div> 
       </Modal> 
       <Modal 
        isOpen={this.state.OFTModalOpened} 
        className="modal-dialog" 
        overlayClassName="modal show" 
        onAfterOpen={this.context.executeAction(LoadUsersByDepartment, 8)} 
        > 
        <div className="modal-content"> 
         <div className="modal-header"> 
          <button type="button" onClick={this.toggleOFTModal.bind(this)} className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
          <h4 className="modal-title">Set OFT member</h4> 
         </div> 
         <div className="modal-body"> 

         </div> 
         <div className="modal-footer"> 
          <button type="button" onClick={this.toggleOFTModal.bind(this)} className="btn btn-default" data-dismiss="modal">Close</button> 
          <button type="button" className="btn btn-primary">Save changes</button> 
         </div> 
        </div> 
       </Modal> 
      </div> 
     ); 
    } 
} 

我的行动：

import qwest from 'qwest'; 

export default function LoadUsersByDepartment(actionContext, payload) { 
    return qwest.get('/users/fetch/department', {department_id: payload}, {responseType: 'json'}) 
     .then(function (response) { 

      actionContext.dispatch('RECEIVED_USERS_DATA', {data: response.response}) 

     }) 
}; 

但在我的控制台我看到的是行动正在不断呼吁。发生了什么，以及如何才能在打开模式时执行操作？

Answer 1

只是在这里快速开枪。尝试，而不是现有的声明这一项，

<Modal 
    ... 
    onAfterOpen={() => this.context.executeAction(LoadUsersByDepartment, 8)} 
    ... 
> 

你的代码所做的是：
模式打开时，从this.context.executeAction(LoadUsersByDepartment, 8)调用执行的结果。

打开模式时，调整后的代码执行您的操作（不是结果）。