时间戳

首页 > 解决方案 > 如何等到设置上下文值 | 反应钩子

reactjs - 如何等到设置上下文值 | 反应钩子

问题描述

如何等到设置上下文值？

我遇到了一个问题，我无法从上下文中获取值，所以当我需要它时，我总是得到初始值，"". 所以现在我的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);
    }
};

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

标签： reactjsreact-hooks

解决方案

由于上下文值更改仅反映在初始渲染上，因此您可以将回调函数传递给返回更新值的 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);
    }
};

推荐阅读