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>
   );
 }
}

Product.js

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

index.js

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

Answer 1

我相信您错过了return的{{1}}前面。像这样：

value.products.map(prod=>(

组件未在地图内渲染

1 个答案: