React Router通过Link传购物车数据后页面空白问题求助

问题根源 #

1. 传参嵌套错误：Catalog页面传参时多套了一层对象，导致Cart页面接收的cartItems是包含数组的对象而非数组本身
2. 数组直接渲染无效：React无法直接渲染原始数组，必须遍历生成React元素才能在页面显示

修正步骤 #

1. 修正Catalog.js的传参代码

把Link组件的state参数从嵌套对象改为直接传递数组：

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

// 修改后
<Link to="/cart" state={{ cartItems }}>Cart</Link>

2. 修正Cart.js的Card组件渲染逻辑

遍历购物车数组生成可渲染的元素，同时处理空数组和state不存在的情况（比如刷新页面）：

function Card(){
  const location = useLocation()
  // 处理刷新页面时state丢失的情况，给默认空数组
  const { cartItems = [] } = location.state || {}
  
  console.log(cartItems)

  return (
    <div className="cart-items">
      {cartItems.length === 0 ? (
        <p>购物车是空的</p>
      ) : (
        cartItems.map(item => (
          <div key={item.id} className="cart-item">
            <h3>{item.name}</h3>
            <p>价格: {item.price} €</p>
            {/* 根据你的商品数据添加更多展示字段 */}
          </div>
        ))
      )}
    </div>
  )
}

额外说明 #

如果需要刷新页面后购物车数据不丢失，建议使用Context API或Redux这类全局状态管理方案，代替路由传参的方式存储购物车数据。

内容的提问来源于stack exchange，提问作者ljaskolka