过滤后的产品未在反应中重新渲染，而是在状态中重新渲染

Question

我正在尝试过滤产品数组中的产品。状态显示已过滤的产品，但组件未重新呈现。

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

我的产品列表组件是这个，我正在使用react context API。

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

} }

当我搜索时，控制台会在阵列中显示正确数量的对象，但产品不会重新呈现。请对此我需要帮助，我已经处理了好几天。谢谢