return 函数不在 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

您缺少 return。您应该 return 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>

return 函数不在 React 中呈现

return function doesn't render in React

javascript

reactjs

react-context