umi中操作mock中的数据实现搜索操作

我们定义两个属性，分别是我们的原始数据和渲染的数据

 const [book, setbook] = useState([]); //原始数据
  const [sear, setSear] = useState([]); //用于渲染的数据

input搜索框绑定onChange事件，通过e.target.value获取我们的输入框中的值

<input type="text" placeholder='搜索' onChange={(e)=>{searchs(e.target.value)}}/>

搜索事件实现

  const searchs=(e)=>{
    // 如果e不为空，那么进行搜索
    if(e){
        setSear(
            book.filter(val => val.name===e)
        )
        // 如果e是空的话，仍渲染整个页面
    }else{
        setSear(book) 
    }
   
  }

页面数据渲染，渲染的是我们渲染中的数据

 {sear.map((item: any, index) => {
          return (
            <div className="items" key={index}>
               <div className="tin">{item.name}</div>
            </div>