组件不在地图内呈现

Question

react 组件不会在 map 方法中渲染。我正在使用 ProductList 中的 map 方法调用 Product 组件，但它不会呈现。在 map 方法之外，它可以工作。我试图找到问题，但仍然找不到。我错过了什么吗？

context.js

import React, { Component } from 'react';
import {storeProducts,detailProduct} from './data';

const ProductContext=React.createContext();

class ProductProvider extends Component{

    constructor(props)
    {
        super(props);
        this.state={
            products:storeProducts,
            detailProduct:detailProduct
        }
    }

    render()
    {
        return(
            <ProductContext.Provider value={{...this.state}}>
             {this.props.children}
            </ProductContext.Provider>
        );
    }
}


const ProductConsumer=ProductContext.Consumer;

export {ProductContext,ProductProvider,ProductConsumer};

ProductList.js

class ProductList extends Component {

 render() {
    return(
      <React.Fragment>
         <ProductConsumer>
              {
                 value=> {
                      value.products.map(prod=>(
                            <div>
                               {console.log(prod)}
                               <Product/> // this component does not render
                            </div>
                      ))
                  }
               }
          </ProductConsumer>
       </React.Fragment>
   );
 }
}

产品.js

class Product extends Component {
    render() {
        return (
            <div>
                <h2>Hello From Product</h2>
            </div>
        );
    }
}

index.js

<ProductProvider>
    <Router>
    <App />
    </Router>
</ProductProvider>

Answer 1

我相信您在value.products.map(prod=>( 前面缺少return。比如：

class ProductList extends Component {
  render() {
    return (
      <React.Fragment>
        <ProductConsumer>
          {(value) => {
            return value.products.map((prod) => (
              <div>
                {console.log(prod)}
                <Product /> 
              </div>
            ));
          }}
        </ProductConsumer>
      </React.Fragment>
    );
  }
}