无法使用 setstate 更新我的状态以进行贝宝付款

Question

所以我的问题是我更新了我的状态，但是当我尝试使用它来批准我的付款时，OrderUrl 是空的，我不知道 setState 是异步的，但是我怎样才能避免这种情况并立即更新我的状态。

我在我的网站的两三页中遇到了这个问题，我已经做了一些搜索，有些人说我可以使用 useEeffect 来更新我的状态，但我不能在我的情况下使用它。

import React, {useRef, useState, useEffect, useContext} from "react";

const paimentValidation = () => {

    **// ***************This is my state ConfirmUrl******************* **

    const [orderUrl, setorderUrl] = useState("");
    const [confirmUrl, setconfirmUrl] = useState("");

    function getOrder() {
        console.log("order url", orderUrl);
        var ddata = {arrival: arrival, departure: departure, propertyId: id,      hosting_capacity: nbrVoyager};
        console.log('ddata', ddata);
        return fetch(orderUrl, {
            method: "POST",
            body: JSON.stringify(ddata),
            headers: {
                'content-type': 'application/json',

                'Accept': 'application/json',
                'Authorization': localStorage.getItem('access_token') ? localStorage.getItem('access_token') : ''
            }


        }).then(function (res) {
            return res.json();
        }).then(function (data) {
            localStorage.setItem('data', data);
            console.log("LOG CONFIRM URL", data.confirmUrl);
            
            ** ******************** // HERE I UPDATE MY STATE************************ ** 
            setconfirmUrl(data.confirmUrl);
            console.log("confirm url", confirmUrl);
            return data.orderID;
        })

    }

    function approuve () {
        ** **************AND HERE MY STATE confirmUrl is empty so i get an error with paypal paiment********************** **

        **console.log('CONFIRM URL', confirmUrl);**
        useEffect(() => alert(confirmUrl), [confirmUrl]);
        return fetch(confirmUrl, {
            headers: {
                'content-type': 'application/json',
                'Accept': 'application/json',
                'Authorization': localStorage.getItem('access_token') ? localStorage.getItem('access_token') : ''
            }
        }).then(function (res) {
            return res.json();
        }).then(function (data) {
            router.push("paymentsuccess");
        })
    }

    return (
        <LoadingOverlay
            active={orderUrl == ""}
            spinner
            text='Loading ...'
        >

                        <h2 className={styles.titles}>Payer avec</h2>
                        {orderUrl != "" ? (
                            <PayPalScriptProvider options={{
                                "client-id": "AYz2CwrBi8Tu5wdVqsd9IIs3ZdfN0C7cIkA0gczx_AquHaVQQIQJT2M4Neghd04Kje2At62p2ked1-Bu",
                                currency: "EUR",
                                commit: true
                            }}>
                                <PayPalButtons
                                    createOrder={getOrder}
                                    onApprove={approuve}
                                />
                            </PayPalScriptProvider>) : (<br/>)}


                    </div>
                </div>

            </div>

        </LoadingOverlay>
    );
};

export default paimentValidation;

Answer 1

您可以在 PayPalButtons 组件中使用 onApprove 处理程序来设置一些状态，然后从依赖它的 useEffect 挂钩内部调用您的 approuve 函数：


const paimentValidation = () => {
    const [orderUrl, setorderUrl] = useState("");
    const [confirmUrl, setconfirmUrl] = useState("");
    const [approved, setApproved] = useState(false);

    useEffect(() => {
        if(confirmURL && approved) {
            // we have the confirmation url and approval from the paypal buttons
            approuve();
        }
    }, [approved, confirmUrl]); // runs whenever the approved OR confirmUrl state changes

    ...

    <PayPalButtons
        createOrder={getOrder}
        onApprove={() => setApproved(true)} // the button now just sets the state flag, which will trigger the useEffect on the next render
    />

    ...
};

无法使用 setstate 更新我的状态以进行贝宝付款

Cant Update my state using setstate for paypal paiment

javascript

frontend

setstate

reactjs

react-hooks