返回函数不会在 React 中呈现

Question

我正在尝试在 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>
            </>
        )
    }

}

我也做过同样的事情，而且效果很好。我不知道为什么我的映射函数不显示我需要的数据。请查看 cmets 了解更多详情

Answer 1

您错过了退货。您应该返回 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>