ReactJS Looping ExecuteAction

Question

Ich habe zwei reagieren Modalverben mit onAfterOpens definiert wie folgt:

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> 
     ); 
    } 
} 

Meine Aktion:

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}) 

     }) 
}; 

Aber in meiner Konsole Ich sehe, dass die Aktionen ständig genannt werden. Was passiert und wie bekomme ich es, die Aktion nur auszuführen, wenn das Modal geöffnet ist?

Answer 1

Nur eine kurze Einstellung hier. Versuchen Sie dieses, anstelle der bestehenden Anweisung

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

Was Ihr Code tut, ist:
wenn modal geöffnet wird, um das Ergebnis von this.context.executeAction(LoadUsersByDepartment, 8) Anruf auszuführen.

Angepasster Code führt Ihre Aktion aus (nicht das Ergebnis), wenn Modal geöffnet wird.