制作网站（地图，道具和其他新手事物）

Question

你好，我遵循了教程，但我不知道哪里出了问题。请帮忙。它显示“ TypeError：无法读取未定义的属性'map'”。我包括2个文件，请看。

state={
    products: storeProducts
}

render(){
    return(
        <React.Fragment>
            <div className="py-5">
            <div className="container">
            <Title name="our" title="products"/>
            <div className="row">
            <ProductConsumer>
            {value=>{
                return value.products.map(product=>{
                    return <Product key={product.id} product={product}/>
                });
                }}
            </ProductConsumer>
            </div>
            </div>
            </div>
        </React.Fragment>
    )
}

}

handleDetail=()=>{
    console.log('hello from detail')
}
addToCart=()=>{
    console.log('hello from add to cart')
}
render(){
    return(
        <ProductContext.Provider value={{
            ...this.state,
            handleDetail: this.handleDetail,
            addToCart: this.addToCart,
        }}>
        {this.props.children}
        </ProductContext.Provider>
    )
}

}

const ProductConsumer = ProductContext.Consumer;

导出{ProductProvider，ProductConsumer}