用于调度操作的React返回功能代码块总是跳过并且不返回任何内容

Question

我正在按照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>

Modalaksansjes

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 :(

Answer 1

我认为问题出在你打电话给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