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>

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

}

detailsModal.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

用于调度动作的React返回函数代码块始终跳过并且不返回任何内容

1 个答案: