reactjs - REACT ：尽管没有错误，但仍为空渲染

Question

我正在使用 Context API 来管理小型应用程序中的状态。我得到响应 OK，Consumer 有它，所以我通过它进行映射，并希望通过 props 将数据从它传递到 Product Card 组件。并且产品卡完全没有渲染。我没有任何错误。谁能帮帮我？这是父组件的代码：

import Pagination from "./Pagination";
import { Consumer } from "../context";

export default class Browse extends Component {
  render() {
    return (
      <Consumer>
        {value => {
          const { search } = value;
          return (
              <ProductsGrid>
                {search.map(beer => (
                  <ProductCard
                    key={beer.id}
                    beerId={beer.id}
                    beerName={beer.name}
                    beerTagline={beer.tagline}
                    beerAbv={beer.abv}
                    firstBrewed={beer.first_brewed}
                    imageUrl={beer.image_url}
                  />
                ))}
              </ProductsGrid>
          );
        }}
      </Consumer>
    );
  }
}`````

and here is the Product Card component: 

```export default class ProductCard extends React.Component {
  render() {
    return (
      <div className="product-card">
        <div className="product-card-inner">
          <div className="product-info-container">
            <h1 className="beer-name">{this.props.beerName}</h1>
            <p className="beer-type">{this.props.beerTagline}</p>
            <p className="beer-alcohol">{this.props.beerAbv}%</p>
            <p className="first-brewed">
              First brewed: {this.props.firstBrewed}
            </p>
          </div>
          <div className="beer-image-container">
            <img src={this.props.imageUrl} alt="beer" />
          </div>
          <div className="price-container">
            <h1>£ 3.50</h1>
          </div>
          <div className="button-container">
            <div className="quantity-container">
              <p className="minus-sign"> - </p>
              <p className="qty-number"> 0 </p>
              <p className="plus-sign"> + </p>
            </div>
            <div className="add-container">
              <IoIosCart />
              <p>Add</p>
            </div>
          </div>
        </div>
      </div>
    );
  }
}```

标签： reactjsrendering