反应 js 回调函数

Question

我有一个函数 A，它会在单击数字时调用。函数 A 设置变量的状态并调用另一个函数 B 作为回调。 B 现在必须进行 redux 调用以从 API 获取数据，然后调用另一个函数 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}
};

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

有两种方法

使用async/await

先让你的行动return一个承诺

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

然后你可以从functionB中获取结果并将其传递给functionC

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
}

使用 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);
      });
  }
}

反应 js 回调函数

React js callback functions

callback

reactjs