首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何修复“item.item_name is null”

如何修复“item.item_name is null”
EN

Stack Overflow用户
提问于 2019-04-15 21:37:08
回答 3查看 103关注 0票数 0

我想在我的仪表板中添加一个搜索字段,我在这个api中有get api,有数组,在数组中有对象,所以我如何在react中做这件事,我应该在它上应用什么逻辑。

下面是我应用于它的逻辑,但它返回错误

这是错误:

TypeError: item.item_name is null

这是我应用的逻辑:

代码语言:javascript
运行
复制
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 });
  };

下面是输入字段:

代码语言:javascript
运行
复制
  <input placeholder="Type Keyword here ....."  onChange={this.handleChange}   value={SearchResult} /> 
EN

回答 3

Stack Overflow用户

发布于 2019-04-15 21:39:57

如果你尝试这样做,它能解决你的问题吗?

代码语言:javascript
运行
复制
this.state.all_items.filter(item => item.item_name.toLowerCase() === lowercasedFilter);

我稍微更新了一下,因为你只需要检查直接比较,而不是使用indexOf。

票数 0
EN

Stack Overflow用户

发布于 2019-04-15 21:45:11

有两件事需要解决。

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

以下是代码

代码语言:javascript
运行
复制
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 });
  };
票数 0
EN

Stack Overflow用户

发布于 2019-04-16 13:24:27

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

代码语言:javascript
运行
复制
  //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 from state

代码语言:javascript
运行
复制
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 });

   }

您的代码呈现建议

代码语言:javascript
运行
复制
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方法应该如下所示

代码语言:javascript
运行
复制
  render() {
    let suggestions=this.get_suggestion();
    return (
      <div className="App">
      <input type='text' onKeyUp={this.handleChange} />
       {suggestions}
     </div>
   );
  }
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55690437

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档