Comment créer une table filtrable dans React

Question

Je crée une table filtrable dans React, et je continue d'obtenir une erreur store.showFilteredResults.map is not a function. J'utilise MobX pour gérer mon état d'application. Voici la boutique:

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

Voici le composant où je veux filtrer la table en fonction de l'entrée utilisateur:

@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 

Comment puis-je retourner le tableau donor afin que je puisse filtrer à l'aide le champ d'entrée?

Answer 1

Vous devez faire votre showFilteredResults en computed.

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