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

Question

在获取后，如果我单击某个卡，我能够填充一个空数组。 我想将其作为道具传递给子组件，我想我的做法是正确的，当我尝试控制台记录它时出现问题，因为我看不到任何错误并且控制台.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>;
};