组件不在地图内呈现

Posted 2023-04-14

【中文标题】组件不在地图内呈现

【英文标题】：component does not render inside map

【发布时间】：2020-11-15 18:43:39

【问题描述】：

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>

【问题讨论】：

您可以尝试在value.products.map(prod=>( 前面添加return 吗？

我也将其添加为答案。 :)

【参考方案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>
    );