Question

我想在仪表板中添加一个搜索字段，并且在此api具有数组的api中获取了api，并且在数组中有对象，因此我该如何对应该应用的逻辑做出反应。

这是我应用的逻辑，但返回的错误是

这是错误：

TypeError: item.item_name is null

这是我适用的逻辑：

handleChange = event => { 
    const lowercasedFilter = this.state.SearchResult.toLowerCase();
    this.state.all_items.filter(item => {
      // console.log(item)
      return (item.item_name.toLowerCase().indexOf(lowercasedFilter) !== -1)
    }); 
    this.setState({ SearchResult: event.target.value });
  };

这是输入字段：

  <input placeholder="Type Keyword here ....."  onChange={this.handleChange}   value={SearchResult} />

Answer 1

如果您尝试这样做，是否可以解决您的问题？

this.state.all_items.filter(item => item.item_name.toLowerCase() === lowercasedFilter);

由于您只需要检查直接比较而不是使用indexOf，因此我对其进行了少许更新。

Answer 2

需要修复两件事。

在致电item_name之前检查null是否不是toLowerCase()
filter()不会修改原始数组，因此您需要将结果存储在变量中，然后更改状态。

这是代码

handleChange = event => { 
    const lowercasedFilter = this.state.SearchResult.toLowerCase();
    let res = this.state.all_items.filter(item => {
      // console.log(item)
      return (item.item_name && item.item_name.toLowerCase().indexOf(lowercasedFilter) !== -1)
    }); 
    this.setState({all_items:res, SearchResult: event.target.value });
  };

Answer 3

根据其他答案和问题描述中的评论，我认为您想实现搜索建议组件，该组件从api提取项目列表，并在搜索框的按键上根据用户输入过滤项目列表。为此，您将需要维护两个数据列表，一个由API提供，另一个由用户输入过滤，因此您的组件状态应类似于

  //a constructor of your component
   constructor(props){
     super(props);
     this.state={
     //i assume all_items will be initialied at the componentDidmount event by api call
  all_items :
      [{item_name: 'hello'},{item_name: 'humty'},{item_name: 'dumpty'},{item_name: 'world'}] ,
  //use this to display suggestions by filtering  the all_items
   filtered_items:[],
  SearchResult:'',//you should name it searchQuery not SearchResult as it hold input from search box
  }

}

您的事件句柄应该是这样的，如果您检查代码，则在更新之前使用状态的searchResult

handleChange = event => { 
/***
 *  your old code ,which is wrong initially this.state.SearchResult will be ''
 * const lowercasedFilter = this.state.SearchResult.toLowerCase(); 
 */
const lowercasedFilter = event.target.value;
//filter the all_items to make suggestion
let filtered_items =this.state.all_items.filter(item => {
return (item.item_name.toLowerCase().indexOf(lowercasedFilter) !== -1)
 }); 
   if(filtered_items.length<=0){
  filtered_items=this.state.all_items;
  }
//now update both filtered items and searchResult,previosuly you are just filtering all items but not updating them
this.setState({ SearchResult:event.target.value,filtered_items:filtered_items });

   }

您的代码呈现建议

get_suggestion=()=>{
if(this.state.SearchResult.length>0){
  return <ul>
    {this.state.filtered_items.map((item)=>{
      return <li>{item.item_name}</li>
    })}
  </ul>
}
return null;
  }

您的渲染方法应该是这样

  render() {
    let suggestions=this.get_suggestion();
    return (
      <div className="App">
      <input type='text' onKeyUp={this.handleChange} />
       {suggestions}
     </div>
   );
  }

如何解决“ item.item_name为空”

3 个答案: