我想在我的仪表板中添加一个搜索字段,我在这个api中有get api,有数组,在数组中有对象,所以我如何在react中做这件事,我应该在它上应用什么逻辑。
下面是我应用于它的逻辑,但它返回错误
这是错误:
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} />
发布于 2019-04-15 21:39:57
如果你尝试这样做,它能解决你的问题吗?
this.state.all_items.filter(item => item.item_name.toLowerCase() === lowercasedFilter);
我稍微更新了一下,因为你只需要检查直接比较,而不是使用indexOf。
发布于 2019-04-15 21:45:11
有两件事需要解决。
toLowerCase()
filter()
之前检查item_name
是否为null
不会修改原始数组,因此您需要将结果存储在变量中,然后更改状态。以下是代码
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 });
};
发布于 2019-04-16 13:24:27
根据其他答案和你的问题描述中的评论,我认为你想实现搜索建议组件,它从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 from state
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方法应该如下所示
render() {
let suggestions=this.get_suggestion();
return (
<div className="App">
<input type='text' onKeyUp={this.handleChange} />
{suggestions}
</div>
);
}
https://stackoverflow.com/questions/55690437
复制相似问题