REACT에서 필터링 가능한 테이블을 만드는 방법

Question

React에서 필터링 가능한 테이블을 만들고 있는데, 계속 오류가 발생합니다. store.showFilteredResults.map is not a function.

MobX를 사용하여 응용 프로그램 상태를 관리하고 있습니다. 내가 사용 그것을 통해 필터링 할 수 있도록 내가 donor 배열을 반환하려면 어떻게

@observer 
class Search extends Component { 

    render(){ 
     const store = this.props.store 
     const rhFilt = store.filterByRH 
     const btFilt = store.filterByBT 
     const filterType = rhFilt && btFilt ? <div><BloodTypeFilter/><RHFilter/></div> 
         : rhFilt ? <RHFilter/> 
         : btFilt ? <BloodTypeFilter/> 
         : null 
     const results = store.showFilteredResults.map(result => { 
     console.log(result) 
     }) 
    return(
     <div> 
     <form className="form-group"> 
      <label htmlFor="filters">Filter by: </label> 
      {filterType} 
      <div className="filters-group"> 
       <div className="filter-menu"> 
        <label htmlFor="blood-type">Blood type</label> 
        <input 
         className="check" 
         type="checkbox" 
         value="bt" 
         onChange={this.handleSearchFilter} 
         /> 
       </div> 
       <div className="filter-menu"> 
        <label htmlFor="rh-factor">Rh factor</label> 
        <input 
         className="check" 
         type="checkbox" 
         value="rh" 
         onChange={this.handleSearchFilter} 
         /> 
       </div> 
      </div> 

      <input 
       type="text" 
       className="form-control" 
       placeholder="search..." 
       value={store.searchValue} 
       onChange={this.getSearch} 
       /> 
     </form> 
     <div> 
      {store.showFilteredResults} 
     </div> 
    </div> 
    ) 
} 
handleSearchFilter = (e) => { 
    const target = e.target.value 
    if (target==='bt') 
     this.props.store.searchByBT() 
    if (target==='rh') 
     this.props.store.searchByRH() 
} 
getSearch = (e) => { 
    this.props.store.getSearchValue(e.target.value) 
} 
} 

export default Search 

: 여기

class AppState { 
     @observable searchValue = ""; 
     @observable donors = [ 
      {id: 1, firstname: "John", lastname: "Smith", age: 43, contact: 7777777, type: 'O', rh: 'Positive'}, 
      {id: 2, firstname: "Mary", lastname: "Smith", age: 25, contact: 7777447, type: 'AB', rh: 'Negative'} 
     ] 
     @observable donorInfo = { 
      firstname: '', 
      lastname: '', 
      contact: '', 
      bloodType: 'A', 
      rhFactor: 'neg' 
     } 
     getSearchValue = (val) => this.searchValue = val 
     showFilteredResults() { 
      return this.donors.filter(donor => { 
      return donor.firstname.indexOf(this.searchValue) > -1 
      }) 
     } 
    } 

내가 사용자 입력을 기반으로 테이블을 필터링 할 구성 요소입니다 : 여기에 가게입니다 입력 필드?

Answer 1

당신은 당신의 showFilteredResults computed으로 확인해야

:.

@computed get showFilteredResults() { 
    return this.donors.filter(donor => { 
    return donor.firstname.indexOf(this.searchValue) > -1 
    }) 
}