购物车数组未正确呈现，react.js

Question

在获取后，如果我点击某个卡片，我可以填充一个空数组。 我想将它作为道具传递给子组件，我想我的做法是正确的，当我试图在子组件中对其进行控制台记录时会出现问题，因为我看不到任何错误，并且 console.log 是不打印任何东西

---

let shoppingCart = [];

const fetchProducts = async () => {
const data = await fetch(
  "blablablablablab"
);
const products = await data.json();
setProducts(products);
console.log(products);
};


const handleShoppingCart = product => {
  shoppingCart.push(product);
  console.log(shoppingCart);
  return shoppingCart;
};

在返回函数中，我尝试检查数组是否不为空、是否未定义或是否不为空但结果相同

{shoppingCart.length !== 0 ? (
    <ShoppingCart parkingSlots={shoppingCart} />
  ) : null}

子组件

const ShoppingCart = ({ parkingSlots }) => {
  console.log(parkingSlots);
  const parkingSlotsComponent = parkingSlots.map((parkingSlot, i) => {
  // const { name } = parkingSlot;
  return (
    <div className="parking_details" key={i}>
      {parkingSlot.name}
    </div>
  );
});
return <div className="checkout">{parkingSlotsComponent}</div>;
 }; 

Answer 1

数据在props。

当数据通过props传递给子组件时，它是props子组件的一部分。试试下面，看看你是否可以控制台记录数据。

const ShoppingCart = props => {
  console.log(props.parkingSlots);
  const parkingSlotsComponent = props.parkingSlots.map((parkingSlot, i) => {
  // const { name } = parkingSlot;
  return (
    <div className="parking_details" key={i}>
      {props.parkingSlot.name}
    </div>
  );
});
return <div className="checkout">{parkingSlotsComponent}</div>;
 };