javascript - ReactJS 循环执行Action

Question

我有两个使用 onAfterOpens 定义的 react 模式，如下所示:

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) 调用的结果。

打开模式时，调整后的代码将执行您的操作(而不是结果)。