我在NextJS项目中尝试Map数组时遇到了一个问题。我遇到的错误是:
⨯ src\app\delivery\cart\page.tsx (30:9) @ map
⨯ TypeError: Cannot read properties of null (reading 'map')
at Cart (./src/app/delivery/cart/page.tsx:36:18)
28 | <Navbar />
29 | <p className="text-4xl p-4">Cart</p>
> 30 | {cart.map((item) => (
| ^
31 | <div key={crypto.randomUUID()}>
32 | <p>{item.name}</p>
33 | <p>{item.price}</p>
字符串
我感到困惑的原因是因为一切都被正确渲染了。我最好的猜测是有一瞬间我的cart
useState变量为null,因此弹出了这个错误。下面是cart/page.tsx
的代码:
"use client";
import Navbar from "@/components/delivery/navbar";
import { useEffect, useState } from "react";
export default function Cart() {
const cartFromLocalStorage =
typeof window !== "undefined"
? JSON.parse(localStorage.getItem("cart") || "[]")
: null;
const [cart, setCart] = useState<
{
name: string;
imgSrc: string;
price: number;
id: number;
amount: number;
}[]
>(cartFromLocalStorage);
useEffect(() => {
localStorage.setItem("cart", JSON.stringify(cart));
}, [cart]);
return (
<>
<Navbar />
<p className="text-4xl p-4">Cart</p>
{cart.map((item) => (
<div key={crypto.randomUUID()}>
<p>{item.name}</p>
<p>{item.price}</p>
<p>{item.id}</p>
<p>{item.amount}</p>
</div>
))}
</>
);
}
型
我尝试通过以下代码检查cart
是否存在来修复此问题。
{cart ? cart.map((item)=> (...)) : "<p> No Items in Cart </p>"}
型
我也改变了
const cartFromLocalStorage =
typeof window !== "undefined"
? JSON.parse(localStorage.getItem("cart") || "[]")
: null;
型
到
const cartFromLocalStorage =
typeof window !== "undefined"
? JSON.parse(localStorage.getItem("cart") || "[]")
: [];
型
但这两次尝试都导致了NextJS的水合错误。这让我抓狂,我还没能找到一个可靠的修复方法。任何帮助都非常感谢。
1条答案
按热度按时间jaxagkaj1#
尝试在map方法之前使用条件运算符.它将处理初始的未定义值直到数据被呈现
字符串