Question

如何等待设置上下文值？

我有一个问题，无法从上下文中获取值，所以当我需要它时，我总是得到初始值""。所以现在我的组件中有一个useEffect

useEffect(() => {
    if (posContext.activePaymentTabId) {
        console.log("poscontext i useeffect", posContext); <-- can see my value here now
        // handlePaymentResponse(true, "GODKÄNT");
    }
}, [posContext.activePaymentTabId]);

我在此函数中设置了我的值：

const makeCardPayment = async () => {
    posContext.handleSetActivePaymentTabId(); // <-- Here I set my value that I need later
    try {
        const res = await functionA();

        return functionB(res.foo);

    } catch (error) {}
};

但是在functionB中需要我的值的地方：

const functionB = (foo) => {
    if (foo) {
        setTimeout(() => {
            console.log("calling...", posContext); // <-- Now my value is back to it's initial
        }, 3500);
    }
};

那么，当我想直接从上下文访问我的值时，我还有什么其他选择？

Answer 1

由于上下文值更改仅反映在初始渲染中，因此您可以将回调函数传递给setter，该setter返回更新后的值，并将上下文值传递给functionB。

const makeCardPayment = () => {
    posContext.handleSetActivePaymentTabId(async function(updatedContext) {
       try {
        const res = await functionA();

        return functionB(res.foo, posContext);

       } catch (error) {

       }
    });
};

const functionB = (foo, posContext) => {
    if (foo) {
        setTimeout(() => {
            console.log("calling...", posContext); // <-- Now my value is back to it's initial
        }, 3500);
    }
};

如何等待直到设置了上下文值反应钩子

1 个答案: