Отфильтрованные продукты не рендерится в реакции, а ререндерится в состоянии - PullRequest
0 голосов
/ 04 апреля 2020

Я пытаюсь отфильтровать товары в моем массиве товаров. состояние показывает отфильтрованные продукты, но компонент не выполняет повторный рендеринг.

import React, { Component } from "react";
import ProductList from "./ProductList";
import styled from "styled-components";
import Search from "./SearchBox";
import { storeProducts } from "../data";
import { Container } from "reactstrap";

export default class Store extends Component {
 constructor() {
super();
this.state = {
  campaign: storeProducts,
  searchfield: ""
    };
}
onChange = e => {
this.setState({ searchfield: e.target.value });
console.log(e.target.value);
};
render() {
const searchStore = this.state.campaign.filter(storeProducts => {
  return storeProducts.title
    .toLowerCase()
    .includes(this.state.searchfield.toLowerCase());
});
console.log(searchStore);
return (
  <div>


 <div className="col-lg-9 col-md-9 col-sm-9 col-6">
          <StoreBanner className="banner_area">
            <Search onchange={this.onChange}/>
          </StoreBanner>
        </div>
      </div>
    </SearchArea>

    <ProductList storeProducts={searchStore} />

  </div>
);

Мой компонент Список продуктов такой: я использую api context context.

import React, { Component } from "react";
import Product from "./Product";
import Title from "./Title";
import { ProductConsumer } from "../Context";
export default class ProductList extends Component {
render() {
return (
  <React.Fragment>

    <div className="py-5">
      <div className="container">
        <Title className="font-weight-bold" name="Our" title=" Products" />
        <div className="row">
          <ProductConsumer>
            {value => {
              return value.products.map(product => {
                return <Product key={product.id} product={product} />;
              });
            }}
          </ProductConsumer>
        </div>
      </div>
    </div>
  </React.Fragment>
);

} }

при поиске консоль показывает правильное количество объектов в массиве, но продукты не визуализируются повторно. пожалуйста, мне нужна помощь в этом, я был на этом в течение нескольких дней. Спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...