РЕАКТ: пустой рендер, несмотря на отсутствие ошибок - PullRequest
Новая
       16

РЕАКТ: пустой рендер, несмотря на отсутствие ошибок

0 голосов
/ 14 апреля 2020

Я использую Context API для управления состоянием в небольшом приложении. Я получаю ответ ОК, у Потребителя он есть, поэтому я сопоставляю его и хочу передать данные из него в компонент 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>
    );
  }
}```
...