全局搜索数据表反应

Question

我需要在我的数据中创建全局搜索，并遍历数据中的所有对象并更新表的状态。做这个的最好方式是什么？在我的状态我收到数据数组，我有两种方法来处理这种行为。找不到我乱七八糟的东西？我尝试用两个方法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集，一个是原始数据，一个用于过滤数据，并且只修改过滤数据未原始数据。

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