在我的元素
不会显示在浏览器上，也不会显示在inspect的元素部分中。当我检查页面时，只有我的标签显示在浏览器中。此外，total的值也没有显示。但是，birdInCart中的项目确实存在，因为当我console.log时，我可以看到数组中的项目。为什么map函数的结果没有呈现到页面上？
下面是我的代码：
Cart.js文件：

export default function Cart({ birdInCart, total }) {
    return (
        <div className="cart">
            <h2>Shopping Cart</h2>
            <ol>
                {birdInCart?.map((bird)=> ( 
                    <li key={bird.id}>
                        <p>{bird.name}: {bird.amount}</p>
                    </li>
                ))}
            </ol>
            <h4>Cart Total: ${total}</h4>
        </div>
    )
}

App.Js文件：

import { useState } from "react";
import BirdCard from "./components/BirdCard";
import Cart from "./components/Cart";

function App() {
  const [birdInCart, setBirdInCart] = useState([]);
  const [total, setTotal] = useState(0);

  const addToCart = (bird) => {
    const birdCartItem = {
        id: Math.random(),
        name: bird.name,
        price: bird.amount,
        image: bird.image,
    };
    //setBirdInCart(birdInCart.push(birdCartItem)) - this is not going to work because the push method returns the new length of an array & not the update array. Instead I have to use the spread operator

    setBirdInCart([...birdInCart, birdCartItem]);
    setTotal(total + birdCartItem.amount);
    console.log("it works")
    console.log(birdInCart)
  }

  return (
    <>
      <header>
        <h1>Noni's Bird Sanctuary</h1>
      </header>
      <BirdCard addToCart={addToCart}/>
      <Cart addToCart={addToCart}/>
    </>
  )
}

export default App;

我试着添加一个返回，没有任何变化。我也console.log数组来检查它是否为空。数组不为空。