初始搜索后无法再次搜索

Question

最初搜索时，onClick搜索过滤器并输出结果，console.log向我显示对象数组，但是当我清除输入框并要搜索新内容时，html页面仍包含先前的搜索结果，何时我condole.log，新搜索到的项目是一个空数组。

this.state = { 
   search: data, 
   query: "", 
   resultFound: false
   }

onInput = (event) => {
          this.setState({ query : event.target.value })
         }

multiFilter = (array, filters) => {
          const filterKeys = Object.keys(filters)
// filters all elements passing the criteria
          return array.filter(item => {
// dynamically validate all filter criteria
          return filterKeys.every(key => !filters[key].indexOf(item[key]))
        })
        }

onSearch = () => {
         const { query, search } = this.state
             if (query.length > 0) {
             console.log("Query string is ", query)
         const filterThis = {
             "topname" : (query)
         }
         const filtered = this.multiFilter(search, filterThis)
             this.setState({ search: filtered,
                             resultFound: true }) } 
         }  

return (
    <div> 
    <input type="text" value={this.state.query} onChange={this.onInput} />
    <button onClick={() => this.onSearch()}> Search </button> 
    </div> ) 

我目前必须为每次搜索重新加载页面，并且不希望这样做。为什么会这样？请帮助。我已经看到类似的问题，但无法将其应用于我的情况。

Answer 1

React对作为道具提供的每个状态进行浅比较，如果是新变量，则触发另一个渲染。您的this.multiFilter可能不是不变的，并且不会变异相同的对象。如果是这种情况，请尝试以下方法：

const filtered = [ ...this.multiFilter(search, filterThis) ];

但是更好地修复您的功能并使它不可变。