Question

我有以下操作：

export const receiveBillingRun = data => ({
    type: RECEIVE_BILLING_RUN,
    data,
}); 

export const retrieveBillingRun = billingRunId => dispatch => {
    $.ajax({type: 'GET', url: `/api/billing/billingruns/${billingRunId}/`}).done(data => {
            dispatch(receiveBillingRun(data));
        }
    );
}

在reducer中，我将billingRun和invoice设置为状态

return Object.assign({}, state, {
    billingRun: action.data,
    invoice: action.data.invoice
});

我有一个组件，其属性映射到invoice对象：

export default connect(
    (...
     invoice,
    ...),
    (...
     retrieveBillingRun,
     ...)
)(Component);

我可以通过以下方法执行API调用并刷新billingRun：

writeToTigerPaw(){
    $.ajax({
        type: 'POST',
        url: '/api/billing/telecom/write-to-system/',
        data: {account_number: this.props.params.accountNumber, invoice: this.props.invoice.id}
    }).done(this.props.retrieveBillingRun(this.props.params.billingRunId))
}

上面的代码按预期工作，并且组件刷新为发票的最新状态。

但是在我添加了如下确认确认后：

writeToTigerPaw(){
    const isconfirmed = confirm("Are you sure to write to system?");
    if (isconfirmed === true) {
        $.ajax({
            type: 'POST',
            url: '/api/billing/telecom/write-to-system/',
            data: {account_number: this.props.params.accountNumber, invoice: this.props.invoice.id}
        }).done(this.props.retrieveBillingRun(this.props.params.billingRunId))
    }
}

调用的API实际上已触发并更改了状态，但是该组件没有刷新以反映最新状态。

更新：

我怀疑这是我在done中传递参数的方式，是我之前执行立即执行该参数的方式吗？将其放入箭头功能后，似乎已对其进行了修复。

writeToTigerPaw(){
    const isconfirmed = confirm("Are you sure to write to TigerPaw?");
    if (isconfirmed === true) {
        $.ajax({
            type: 'POST',
            url: '/api/billing/truebill/write-to-tp/',
            data: {account_number: this.props.params.accountNumber, invoice: this.props.invoice.id}
        }).done(()=> this.props.retrieveBillingRun(this.props.params.billingRunId))
    }
}

Answer 1

我会看componentDidUpdate并将prevProps.invoice与您当前的props.invoice进行比较。

https://reactjs.org/docs/react-component.html#componentdidupdate

React不会在if-else语句中重新渲染

1 个答案: