グローバル検索データテーブルreact

Question

私は自分のデータでグローバル検索を作成し、データ内のすべてのオブジェクトに行き、テーブルの状態を更新する必要があります。これを行う最善の方法は何ですか？私の状態では、私はデータ配列を受け取る、私はこの動作を処理する2つの方法があります。私が混乱したものを見つけることができませんか？私は2つの方法handleSearchとhandleSearchTest

const data = [ 
    { key: 1, deviceType: 'Tag', deviceID: 1, name:'Tag For sending an ', location: 'Room_104', status: 'assigned'}, 
    { key: 2, deviceType: 'Tag', deviceID: 2, name:'Tag For sending an ', location: 'Room_104', status: 'assigned'}, 
    { key: 3, deviceType: 'Tag', deviceID: 3, name:'Tag For sending an ', location: 'Room_104', status: 'assigned'}, 
    { key: 5, deviceType: 'AccessPoint', deviceID: 4, name:'AP_2 ', location: 'Room_104', status: 'offline'}, 
    { key: 4, deviceType: 'AccessPoint', deviceID: 5, name:'AP_1', location: 'Room_104', status: 'offline'}, 
] 


class EnhancedTable extends Component { 
    state = { 
     selected: [], 
     data, 
     order: { 
      direction: 'asc', 
      by: 'deviceID', 
     }, 
     search: '', 
    } 

    handleSearch = (event, value) => { 
     // debugger 
     const {data} = this.state 
     let filteredDatas = [] 
     filteredDatas = data.filter(e => { 
      let mathedItems = Object.values(e) 
      let returnedItems 
      mathedItems.forEach(e => { 
       const regex = new RegExp(event.target.value, 'gi') 
       if (typeof e == 'string') 
        returnedItems = e.match(regex) 
      }) 
      return returnedItems 
     }) 
     this.setState({data: filteredDatas, search: event.target.value}) 
    } 

    fuzzyContains = (text, search) => { 
     if (!text) 
      return false 
     if (!search) 
      return true 

     search = search.toLowerCase() 
     text = text.toString().toLowerCase() 

     let previousLetterPosition = -1 

     return search.split('').every(s => { 
      previousLetterPosition = text.indexOf(s, previousLetterPosition + 1) 

      return previousLetterPosition !== -1 
     }) 
    } 

    handleSearchTest = (e, search) => { 
     const {data} = this.state 

     let result = data.filter(x => Object.keys(x).some(key => 
      this.fuzzyContains(x[key], search) 
     )) 

     this.setState({data: result}) 
    } 


    render =() => { 

     const {selected, data, search, order} = this.state 

     return (
      <Paper> 
       <Table 
        data={data} 
        search={search} 
        onSearch={this.handleSearchTest} 
       /> 
      </Paper>) 
    } 
} 
export default EnhancedTable 

Answer 1

私が必要とするのではなく、元のデータを2セット、オリジナルデータ用とフィルタリングされたデータのための1つを作成し、フィルタのみデータを変更することですを使用するようにしてください。

state = { 
     selected: [], 
     data, 
     filteredData: data, 
     order: { 
      direction: 'asc', 
      by: 'deviceID', 
     }, 
     search: '', 
    } 

fuzzyContains = (text, search) => { 
     if (!text) 
      return false 
     if (!search) 
      return true 

     search = search.toLowerCase() 
     text = text.toString().toLowerCase() 

     let previousLetterPosition = -1 

     return search.split('').every(s => { 
      previousLetterPosition = text.indexOf(s, previousLetterPosition + 1) 

      return previousLetterPosition !== -1 
     }) 
    } 

handleSearch = search => { 
     const {data} = this.state 

     let filteredData = data.filter(x => Object.keys(x).some(key => 

      this.fuzzyContains(x[key], search) 

     )) 

     this.setState({filteredData, search}) 
    }