我正在嘗試在 React 中實作購物車。我已經為我的購物車創建了一個背景關系來處理購買的數量并且它作業正常。但是，我在將購物車背景關系中的資料顯示到購物車頁面時遇到了問題。這是我將購買的商品顯示到購物車頁面的代碼。
export class Cart extends React.Component {
constructor(props) {
super(props);
}
render(){
return (
<>
<div>
<h1>Cart</h1>
</div>
<CartContext.Consumer>
{
(cartContext) =>{
const {productsToPurchase} = cartContext
console.log(productsToPurchase)
if (productsToPurchase.length === 0){
return(<h1>Cart is empty</h1>)
}
else {
productsToPurchase.map(
(product) =>{
// console.log works fine
console.log("Reached Else Statment")
console.log(product.itemId)
// return doesn't work
return(
<h1 key={product.itemId "-cart"}> 8525552 </h1>
)
})
}
}
}
</CartContext.Consumer>
</>
)
}
}
我做了同樣的事情，它奏效了。我不知道為什么我的映射函式沒有顯示我需要的資料。請查看評論以獲取更多詳細資訊
uj5u.com熱心網友回復：
你錯過了回報。您應該回傳 productsToPurchase.map() 的結果
<CartContext.Consumer>
{
(cartContext) =>{
const {productsToPurchase} = cartContext
console.log(productsToPurchase)
if (productsToPurchase.length === 0){
return(<h1>Cart is empty</h1>)
}
else {
return productsToPurchase.map(
(product) =>{
// console.log works fine
console.log("Reached Else Statment")
console.log(product.itemId)
// return doesn't work
return(
<h1 key={product.itemId "-cart"}> 8525552 </h1>
)
})
}
}
}
</CartContext.Consumer>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/355158.html
標籤：javascript 反应 反应上下文