ReactJS context-api 在我获取数据后不会呈现

Question

这是一个 next.js 网站，因为我的 Navbar 组件和我的购物车页面都应该可以访问我的购物车内容，所以我为它们创建了一个上下文。如果我尝试呈现页面，我会得到:

未处理的运行时错误

类型错误:无法读取未定义的属性(读取“键”)

obs:cartContent 数组存在且长度为 1，我可以通过使用 setTimeout 延迟呈现数据来获取它，但是无法在获取数据后立即呈现它。

我需要在从 firebase 返回数据后进行渲染，但总是遇到上述错误。

这是我的 _app.tsx 文件

function MyApp({ Component, pageProps }) {
    // set user for context
    const userContext = startContext();

    return (
        <UserContext.Provider value = { userContext }>
            <Navbar />
            <Component {...pageProps} />
            <Toaster />
        </UserContext.Provider>
    );
}

export default MyApp

此文件具有返回上下文的 startContext 函数，因此可以使用它。

export const startContext = () => {
    const [user] = useAuthState(auth);
    const [cart, setCart] = useState(null);
    const [cartContent, setCartContent] = useState(null);
    useEffect(() => {
        if (!user) {
            setCart(null);
            setCartContent(null);
        }
        else {
            getCart(user, setCart, setCartContent);
        }
    }, [user]);
    return { user, cart, setCart, cartContent, setCartContent };
}

此文件包含 getCart 函数。

export const getCart = async (user, setCart, setCartContent) => {
    if (user) {
        try {
            let new_cart = await (await getDoc(doc(firestore, 'carts', user.uid))).data();
            if (new_cart) { 
                let new_cartContent = []
                await Object.keys(new_cart).map(async (key) => {
                    new_cartContent.push({...(await getDoc(doc(firestore, 'products-cart', key))).data(), key: key});
                });
                console.log(new_cartContent);
                setCartContent(new_cartContent);
                console.log(new_cartContent);
                setCart(new_cart);
            }
            else {
                setCart(null);
                setCartContent(null);
            }
        } catch (err) {
            console.error(err);
        }
    }
}

这是 cart.tsx 网页。当我加载它时，我得到了提到的错误。

export default () => {
    const { user, cart, cartContent } = useContext(UserContext);

    return (
        <AuthCheck>
            <div className="grid grid-cols-1 gap-4">
                {cartContent && cartContent[0].key}
            </div>
        </AuthCheck>
    )
}

我尝试以多种不同方式呈现购物车的内容[0].key，但无法做到。总是得到错误，就好像它是未定义的一样。进行 setTimeout hack 是可行的，但是，我真的想以一种体面的方式解决这个问题，所以它至少在不依赖于 firebase 的响应时间/互联网延迟的意义上是错误证明。

编辑:由于它与 setTimeout 一起使用，感觉就像一个竞争条件，如果使用 setCartContent，它会触发重新渲染，但 setCartContent 无法在渲染内容之前完成，因此它会将状态 cartContent 视为未定义，以后不会再次触发。

Answer 1

尝试改变

{cartContent && cartContent[0].key}

到

{cartContent?.length > 0 && cartContent[0].key}

编辑::实际问题出在 getCart 函数中

let new_cart = await (await getDoc(doc(firestore, 'carts', user.uid))).data();

这要么设置为空数组，要么设置为空对象。所以尝试将您的 if (new_cart) 条件更改为

if (Object.keys(new_cart).length > 0) {

现在你不会得到undefined错误