javascript - 如何在 React 中创建可过滤表

Question

我正在 React 中创建一个可过滤表，但不断收到错误消息，指出 store.showFilteredResults.map 不是函数。

我正在使用 MobX 来管理我的应用程序状态。这是商店:

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

这是我想要根据用户输入过滤表格的组件:

 @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

如何返回 donor 数组，以便我可以使用输入字段对其进行过滤？

Answer 1

您必须将 showFilteredResults 设为 computed :

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