javascript - 购物车数组未正确渲染，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;
};

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

{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>;
 };