React js回调函数

Question

我有一个函数a，它在单击数字时被调用。函数A设置一个变量的状态，并调用另一个函数B作为回调。B现在必须进行redux调用以从API获得数据，然后调用另一个函数C，该函数C使用从API获得的数据生成pdf。

我面临的问题是在函数B中，它正确地从API获取数据，但我无法将数据传递给下一个函数C。

请帮助

functionA = (record) =>
{
this.setState(
{pdfInvoiceNum: record.no}, ()=>{
this.functionB(record)
});
};
functionB = (record) => 
{
this.props.getDetailForPdf(this.state.pdfInvoiceNum)  //=>This sets purchasedetail
this.functionC(this.props.purchasedetail)           
}
functionC = (record) =>
{
console.log(record)     //Doesn't print anything when I click the first time but prints correct data when I click second time
}

//Click starts here
<a onClick={()=>{this.functionA(record)}}>{text}</a>

以下是电话：

const mapDispatchToProps = dispatch => ({
getPurchaseDetailPdf : (pdfInvoiceNum) => dispatch(fetchPurchaseDetailPdf(pdfInvoiceNum)),
});
const mapStateToProps = (state) => {
purchasedetailpdf: state.purchasesReducer.purchasedetailpdf}
};

采购Action.js

export const fetchPurchaseDetailPdf = (number) =>  {
console.log("PO is:"+ PONumber)
return (dispatch) => {
dispatch({type: FETCH_START});
var token = localStorage.getItem("token");

axios.get(`${apiUrl}.../${number}`,
).then(({data}) => {
const results = data.map((row, index) => ({
key: index,
name : row.name,   
}))
dispatch({type: FETCH_SUCCESS});
dispatch({type: PURCHASEDETAILPDF_DATA, payload: results});
}).catch(function (error) {
dispatch({type: FETCH_ERROR, payload: error.message});
console.log("Error****:", error.message);
});
}
}

PurchasesReducer.js

import {FETCH_START, FETCH_SUCCESS, FETCH_ERROR, PURCHASEDETAILPDF_DATA} from '../../constants/ActionTypes';
const initialState = {
pending: false,
purchasedetailpdf: [],
error: null
}
export default function purchaseReducer(state = initialState, action) {
switch(action.type) {
case FETCH_START: 
return {
...state,
pending: true
}
case FETCH_SUCCESS:
return {
...state,
pending: false,
contracts: action.payload
}
case FETCH_ERROR:
return {
...state,
pending: false,
error: action.error
}
case PURCHASEDETAILPDF_DATA: 
return {
...state,
purchasedetailpdf: action.payload,
}
default: 
return state;
}
}
export const getPurchaseDetailPdf = state => state.purchasedetailpdf;
export const getPurchaseDetailPdfPending = state => state.pending;
export const getPurchaseDetailPdfError = state => state.error;

Answer 1

有两种方式

1. 使用async/await

首先让您的操作返回一个承诺

export const fetchPurchaseDetailPdf = (number) =>  {
console.log("PO is:"+ PONumber)
return (dispatch) => {
dispatch({type: FETCH_START});
var token = localStorage.getItem("token");

return axios.get(`${apiUrl}.../${number}`)
.then(({data}) => {
const results = data.map((row, index) => ({
key: index,
name : row.name,   
}))
dispatch({type: FETCH_SUCCESS});
dispatch({type: PURCHASEDETAILPDF_DATA, payload: results});
return results;
})
.catch(function (error) {
dispatch({type: FETCH_ERROR, payload: error.message});
console.log("Error****:", error.message);
});
}
}

然后你可以从函数B得到结果，并将其传递到函数C

functionB = async (record) => {
const result = await this.props.getDetailForPdf(this.state.pdfInvoiceNum)  //=>This sets purchasedetail
this.functionC(result)
}
functionC = (record) => {
console.log(record)     //Doesn't print anything when I click the first time but prints correct data when I click second time
}

2. 使用onCompleted函数回调(我更喜欢这样(

将函数C作为回调传递到函数B中，当api调用完成时，它将被执行

functionB =(record) => {
const result = this.props.getDetailForPdf({
number: this.state.pdfInvoiceNum,
onCompleted: this.functionC
})
}
functionC = (record) => {
console.log(record)     //Doesn't print anything when I click the first time but prints correct data when I click second time
}

修改您的操作以接受onCompleted回调函数：

export const fetchPurchaseDetailPdf = ({ number, onCompleted }) =>  {
console.log("PO is:"+ PONumber)
return (dispatch) => {
dispatch({type: FETCH_START});
var token = localStorage.getItem("token");

axios.get(`${apiUrl}.../${number}`)
.then(({data}) => {
const results = data.map((row, index) => ({
key: index,
name : row.name,   
}))
dispatch({type: FETCH_SUCCESS});
dispatch({type: PURCHASEDETAILPDF_DATA, payload: results});
if (onCompleted) {
onCompleted(results)
}
})
.catch(function (error) {
dispatch({type: FETCH_ERROR, payload: error.message});
console.log("Error****:", error.message);
});
}
}