返回函数不会在 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>
            </>
        )
    }

}

我做了同样的事情，它奏效了。 我不知道为什么我的映射函数没有显示我需要的数据。 请查看评论以获取更多详细信息

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>