如何在反应原生功能成功后立即启动新功能

Question

I want to run a function, just after a function is completed, and also pass some data into the second function. I have tested the two functions individually, they both work. But I want to initiate the second one immediately after the first is complete

This is my code below but the second function didn't run properly.

const ChargeCard = (dispatch) => ({
    cardNumber,
    expiryMonth,
    expiryYear,
    cvc,
    email,
    amountInKobo,
    id
}) => {

    try {
        RNPaystack.chargeCard({
            cardNumber: cardNumber,
            expiryMonth: expiryMonth,
            expiryYear: expiryYear,
            cvc: cvc,
            email: email,
            amountInKobo: amountInKobo * 100

        })
            .then(response => {

                if (response) {
                    setBasic({ id }) //the function to run if this is successful
                }                
            })

    } catch {

        dispatch({
            type: "ADD_ERROR",
            payload:
                "Something went wrong during payment, please try again, don't worry you have not been charged."
        });    
    }

};

This function I want to run immediately that is successful;

const setBasic = () => async ({ id }) => {
    const Basic = 1
    const response = await appApi.put(`/usersub/${id}`, { Basic });
    if (response) {
        console.log(response.data)
    }
}

Answer 1

Change the second function to this:

const setBasic = async ({ id }) => {
    const Basic = 1
    const response = await appApi.put(`/usersub/${id}`, { Basic });
    if (response) {
        console.log(response.data)
    }
}

You've defined it as:

const setBasic = () => async ({ id }) => {

but you are calling it with:

 setBasic({ id }) 

Answer 2

why mix async await with then() stick with one and be consistent with it.

const setBasic = async ({ id }) => {
    const Basic = 1
    const response = await appApi.put(`/usersub/${id}`, { Basic });
    if (response) {
        console.log(response.data)
    }
}

const ChargeCard = (dispatch) => async ({
    cardNumber,
    expiryMonth,
    expiryYear,
    cvc,
    email,
    amountInKobo,
    id
}) => {

    try {
        const response = await RNPaystack.chargeCard({
            cardNumber: cardNumber,
            expiryMonth: expiryMonth,
            expiryYear: expiryYear,
            cvc: cvc,
            email: email,
            amountInKobo: amountInKobo * 100

        })
        if(response) setBasic({ id }) //the function to run if this is successful

    } catch {

        dispatch({
            type: "ADD_ERROR",
            payload:
                "Something went wrong during payment, please try again, don't worry you have not been charged."
        });    
    }

};

This way your login is consistent. However, I just want to mention this; your first function looks like a shorthand way to write action creators using redux-thunk in case I am right, I think you are passing the dispatch wrongly in the first function. You should rewrite your function to this:

const ChargeCard = ({
    cardNumber,
    expiryMonth,
    expiryYear,
    cvc,
    email,
    amountInKobo,
    id
}) => async dispatch => {

    try {
        const response = await RNPaystack.chargeCard({
            cardNumber: cardNumber,
            expiryMonth: expiryMonth,
            expiryYear: expiryYear,
            cvc: cvc,
            email: email,
            amountInKobo: amountInKobo * 100

        })
        if(response) setBasic({ id }) //the function to run if this is successful

    } catch {

        dispatch({
            type: "ADD_ERROR",
            payload:
                "Something went wrong during payment, please try again, don't worry you have not been charged."
        });    
    }

};