Я пытаюсь отфильтровать товары в моем массиве товаров. состояние показывает отфильтрованные продукты, но компонент не выполняет повторный рендеринг.
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>
);
} }
при поиске консоль показывает правильное количество объектов в массиве, но продукты не визуализируются повторно. пожалуйста, мне нужна помощь в этом, я был на этом в течение нескольких дней. Спасибо