尝试呈现通过链接路由传递的道具时，页面为空白

Question

当我试图通过链接呈现从另一个页面传递的购物车项目时，会得到一个空白页面。

当我console.log时，它运行良好，并显示一个数组。

我该如何渲染它们，以这种方式还是其他方式？我使用最新版本的反应路由器

Catalog.js传递数据

import { Header } from "./Header";
import {data} from './Data'
import ListProducts from "./ListProducts";
import { useState } from "react";
import { Link } from "react-router-dom";
export default function Catalog() {
const {products} = data;
const [cartItems, setCartItems] = useState([]);
const onAdd = (product) => {
// const exist = cartItems.find((x) => x.id === product.id);
setCartItems([...cartItems, { ...product}]);
}   

return (
<>
<Header countCartItems={cartItems.length}/>
<ListProducts products={products} onAdd={onAdd}/>
<Link to={`/cart`} state={{ cartItems:{cartItems} }}>Cart</Link>
</>
)
}

Cart.js接收数据

import './Cart.css'
import { useLocation } from 'react-router-dom'
import { Header } from './Header'
function Price(){
return (
<div className='price-cont'>
<div className='price-cointainer'>
<div className='total'>TOTAL</div>
<div className='price'>00,00 €</div>
<div className='checkout'>CHECKOUT</div>
</div>
</div>

)
}
function Card(){
const location = useLocation()
const { cartItems } = location.state

console.log(cartItems)
return (
<h1>{cartItems}</h1>
)
}

export default function Cart(){

return (
<>
<Header />

<div className='cart-container'>
<div className='item-container'>      
<Card />
</div>
</div>
<Price />
</>
);
}

我试过了，但它能用同样的

Answer 1

您已经将cartItems状态数组嵌套在cartItems属性下。

<Link to={`/cart`} state={{ cartItems: { cartItems } }}>Cart</Link>

这意味着路由状态为state.cartItems.cartItems。

你可能不需要嵌套。只需在状态下通过cartItems即可。

<Link to={`/cart`} state={{ cartItems }}>Cart</Link>

这将使路由状态state.cartItems与组件所期望的一样。

const { state } = useLocation()
const { cartItems } = state ?? [];