React中map渲染<li>不显示及total无值问题求助

核心问题：Cart组件未接收必要Props #

你的Cart组件声明需要birdInCart和total两个props，但在App.js里渲染<Cart>时仅传递了addToCart，完全未传入这两个状态值。这直接导致Cart内的birdInCart为undefined（可选链?.避免了报错，但map函数不会执行），total也为undefined，最终列表项和总价都无法渲染。

修复App.js中的Cart渲染代码：

<Cart birdInCart={birdInCart} total={total} />

次要问题：购物车项属性与总价计算错误 #

1. addToCart函数中创建birdCartItem时，错误将price赋值为bird.amount，应改为bird.price（假设BirdCard传入的bird对象包含price属性）；同时Cart组件渲染的是bird.amount，但购物车项未定义该属性，需统一字段：
   • 若需记录商品数量，可给购物车项添加amount: 1（默认添加1件）；
   • 总价计算时，原代码使用total + birdCartItem.amount，但birdCartItem无此属性，应改为total + bird.price或total + birdCartItem.price。

修复后的addToCart函数：

const addToCart = (bird) => {
  const birdCartItem = {
      id: `${bird.id}-${Date.now()}`, // 不推荐用Math.random()做id，改用bird.id+时间戳保证唯一性
      name: bird.name,
      price: bird.price,
      image: bird.image,
      amount: 1 // 新增数量字段，匹配Cart组件渲染的amount
  };
  setBirdInCart([...birdInCart, birdCartItem]);
  setTotal(total + bird.price);
  // 查看最新购物车状态，用函数式更新的回调
  setBirdInCart(prevCart => {
    const newCart = [...prevCart, birdCartItem];
    console.log(newCart);
    return newCart;
  });
}

额外优化：避免异步状态的console.log误导 #

setState是异步操作，直接在setBirdInCart后执行console.log(birdInCart)，打印的是更新前的旧数组，会造成“数组有内容但不渲染”的误解。若需查看最新状态，可通过useEffect监听变化：

import { useState, useEffect } from "react";

// 在App组件内添加
useEffect(() => {
  console.log("当前购物车内容：", birdInCart);
  console.log("当前总价：", total);
}, [birdInCart, total]);

验证效果 #

修复后，Cart组件能获取到正确的birdInCart和total，map函数会正常遍历数组渲染<li>元素，总价也会正确显示。

内容的提问来源于stack exchange，提问作者Noni P.