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

Question

这是一个 next.js 站点，因为我的导航栏组件和我的购物车页面都应该可以访问我的购物车内容，所以我为它们创建了一个上下文。如果我尝试渲染页面，我会得到：

未处理的运行时错误

TypeError: Cannot read properties of undefined (reading 'key')

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>
    )
}

我尝试以多种不同的方式呈现购物车的 content[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 错误

Answer 2

由于似乎存在竞争条件，我认为 setCartContent 在获取其内容之前正在执行。所以我在 getCart 函数中更改了 map 循环，并为 for 循环添加了一个异步函数

await Object.keys(new_cart).map(async (key) => {
        new_cartContent.push({...(await getDoc(doc(firestore, 'products-cart', key))).data(), key: key});
});

到

for (const key of Object.keys(new_cart)) {
         new_cartContent.push({...(await getDoc(doc(firestore, 'products-cart', key))).data(), key: key});
}

如果不使其异步，我无法在其中创建带有 await 的 map 函数，因此我使用 for 循环使其工作。希望有人找到解决这个问题的替代方法，我只能想出一个 for 循环，所以代码是同步的。