Question

我有一系列数据，这些数据在一个数组（json文件）中包含一些对象，它将由react显示。

class App extends React.Component {
 constructor(props){
 super(props);
  this.state = {
   data: [],
       .
       .
       .
    }}}

[{'id': '5c0b6cd9e1382352759fbc25', 'hotelinfo': {'hotelsearch': {'realname': 'Korston Hotel Moscow'}},{'id': '5c0b6cd9e1382352759fbc24', 'hotelinfo': {'hotelsearch': {'realname': 'Lavanta Hotel'}},{'id': '5c0b6cd9e1382352759fbc28', 'hotelinfo': {'hotelsearch': {'realname': 'Stanpoli Hotel'}}]

我有一个输入，用户开始输入该输入（例如，用户键入'Korston'），然后单击一个按钮，新结果应仅包含那些包含“ Korston”名称的酒店的数据。

<div><input type="text" value={this.state.value} onChange={this.handleInputChange} /><span onClick={this.handelSearch}>search</span></div>

handleInputChange(event) {
this.setState({ value: event.target.value });
var val =  event.target.value
}

handelSearch = () => {
let inputval = this.state.value
inputval = inputval.toLowerCase()
.split(' ')
.map((s) => s.charAt(0).toUpperCase() + s.substring(1))
.join(' ');
 let result = this.state.data.filter((item) => {
    let realname = item.hotelinfo.hotelsearch.realname
    let len = realname.length 
     if (len !== 0){
     if (realname.includes(inputval)){
       return true
     } else {
       return false
     }
     }
   })
  return this.setState({data : eval(result)}, () => console.log("ITEMS : ",this.state.data) )
  };

我的问题是，当用户开始键入“ Korston”时，结果显示“ Korston Hotel Moscow”的信息，然后用户键入“ Lavanta”。我希望结果显示“ Lavanta Hotel”的信息，但是似乎当用户下次键入文本（例如Korston）时，过滤将在以前的结果中进行，而不是默认结果。

Answer 1

假设这是您的数据：

var arr = [
  {
  'id': '5c0b6cd9e1382352759fbc25',
  'hotelinfo': { 
    'hotelsearch': {
      'realname': 'Korston Hotel Moscow'
    }
},
{
  'id': '5c0b6cd9e1382352759fbc24',
  'hotelinfo': {
    'hotelsearch': {
      'realname': 'Lavanta Hotel'
    }
},
{
  'id': '5c0b6cd9e1382352759fbc28',
  'hotelinfo': {
    'hotelsearch': {
      'realname': 'Stanpoli Hotel'
    }
}
]

我会做这样的事情：

var query = "korston".toLowerCase();
var resultData = [];
JSON.parse(arr).forEach((obj, i) => {
if(obj.hotelinfo.hotelsearch.realname.includes(query)){
    resultData.push(obj);
  }
})

当然，“ korston”将是动态的。并且resultData将被设置为状态。

Answer 2

您可以在状态中为过滤器表达式添加另一个变量，该变量等于输入的值，并在用户单击搜索并在render函数中进行过滤时进行更新。

constructor() {
  this.state = {
    filterTerm: null,
    // ...
  };
}

handleSearch= () => {
  const {value} = this.state;
  this.setState({filterTerm: value});
}

filterData = (item) => {
  const { filterTerm: term } = this.state;
  if (term === null) {
    return true;
  }
  let inputval = term.toLowerCase()
    .split(' ')
    .map((s) => s.charAt(0).toUpperCase() + s.substring(1))
    .join(' ');

  let realname = item.hotelinfo.hotelsearch.realname
  let len = realname.length
  if (len !== 0) {
    if (realname.includes(inputval)) {
      return true
    } else {
      return false
    }
  }
  return false;
}



 render() {
  const { data, currentPage, itemsPerPage } = this.state;
   const indexOfLastItem = currentPage * itemsPerPage; 
   const indexOfFirstItem = indexOfLastItem - itemsPerPage; 
   const currentItems = data.slice(indexOfFirstItem, indexOfLastItem); 
   const renderHotel = currentItems
   .sort((a, b) => a.total - b.total)
   .filter(this.filterData)
   .map((item, i) => {
      return <div class="item">{item.realname}</div> 
    })

}

反应过滤后如何重置数据

2 个答案: