问题:用于调度动作的React返回函数代码块总是跳过并且不返回任何内容

我正在按照React-Redux的教程,创建一个显示数据的表格,单击记录时会提示模态编辑窗口,在模态窗口中编辑后,单击提交调用api进行数据更新。但是提交回调函数不起作用。

myTable.js :下面的按钮用于调用模态窗口进行编辑

<button className="btn-ghost-dark" onClick={(e) =>this.props.loadModalData(rowInfo.row._id, editable=false, e)}>
                                    <i className="fa fa-search fa-md"></i></button>

modalActions.js

export function loadModalData(oid, editable,e) {
e.preventDefault();
return function (dispatch) {
    dispatch(beginAjaxCall());
    fetch(`http://localhost:8080/api/inv/${oid}`)
        .then(rec => rec.json())
        .then(mdata=> {
            dispatch(mydetailsModal(mdata, editable));
        }).catch(error => {
        throw(error);
    });
};}
export function saveModalData(fulldata) { \\ actually call api to save data
console.log("this is called");
debugger; \\ the program run to here
return function (dispatch)  {
    debugger;  \\  seems never to be here, dont know why?
    console.log("never called");
};

}

详细信息Modal.js

import {saveModalData} from "../actions/modalActions";
class detailsModal extends Component {
constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
}

handleSubmit(mdata, e) {
    e.preventDefault();
    ...populate some formData..;

    saveModalData(formData);
}

render(){
    return(
        <div>
            <div>
                <ReactModal>
                  <form method="post" encType="multipart/form-data" 
                        onSubmit={(e) => this.handleSubmit(this.props.mdata, e)}>
                  .....
                  <button type="submit" hidden={!this.props.editable} > Submit </button>
                </ReactModal>
            </div>
        </div>
    )
}

}

问题出在函数 saveModalData 中,返回函数部分似乎永远不会执行,我的代码有问题吗,我与 loadModalData 函数相比,找不到根本原因,ES/React/Javascript 的新手 :(

解答

我认为问题在于您调用saveModalData(formData);的方式。在您的情况下,您想在返回中调用该函数,因此您必须执行saveModalData(formData)();这称为currying。看看下面的例子是如何表现的。

function outside(){
    console.log('hello from outside');
    return function(){
        console.log('hello from inside')
    }
}

outside(); // without currying
console.log('-----')
outside()() // with currying