与生产者/使用者反应父组件中的过滤状态

如何解决与生产者/使用者反应父组件中的过滤状态

我有一个状态保存在文件Body中，该状态由直接子级WikiReference作为使用者使用。值作为道具传递给WikiReference的子组件。这些孩子之一需要能够将值传递回正文（或其他地方）以过滤WikiReference

中使用的数据集

我认为评论displayed here是前进的方向，但是我在思考如何实现过滤器时会遇到麻烦，例如单击位于一个组件中，而过滤位于另一个组件中。

change = (e) => {
   return this.state.tree.filter(item => item.fileType === e.target.value)
}

Body.js

function Body() {
    const [searchState,setSearchState] = useState({
      searchCriteria: "",headers:[],references: []
    });

  return (

    <>
      <SearchContext.Provider value={{searchState,setSearchState}}>
          <Search />
          <WikiHeader />
          <WikiReference />
      </SearchContext.Provider>

    </>
  );
}

export default Body;

WikiReference.js返回部分

return (
  <>
  {

    references.map(reference => {
      console.log(reference);
      return(
        <div class="container">
          <Title title={reference.title} url={reference.url}/>
          <Domain domain={reference.domain}/>
          <Type type={reference.type}/>
          <IsGov isGov={reference.isGov} onClick={onClick}/>
        </div>
      );
    })
  }
  </>

）;

Type.js

import React,{Component} from "react";
import "../../../App.css"

class Type extends Component {

switch(type){
  switch(type) {
    case 'article':
      return  <span><i  className="fa fa-file-text float-right entryicon" aria-hidden="true"></i></span>
      //return 'fa fa-file-text';
    case 'video':
      return  <span><i  className="fa fa-video-camera float-right icon-red entryicon" aria-hidden="true"></i></span>
      //return 'fa fa-video-camera';
    case 'audio':
      return  <span><i  className="fa fa-headphones float-right icon-orange entryicon" aria-hidden="true"></i></span>
    case 'forum':
        return  <span><i  className="fa fa-comments float-right icon-blue entryicon" aria-hidden="true"></i></span>
    default:
      return 'foo';
  }
}

render(){
  return(
    this.switch(this.props.type)
  );

  }

}

export default Type;