[英]React : Search Filter is not working Properly
I am fetching records from server through API , API was built in Loopback . 我正在通过API从服务器获取记录,API是在Loopback中构建的。 Actually On every page I am showing 5 records , currently It working fine I can navigate
next
or prev
through pagination button and on every page it showing 5 records . 其实在每一页我显示5条记录,目前它工作正常,我可以浏览
next
或prev
通过分页按钮,它显示5个记录每一页上。 Problem is that when User type something in search box , record are fetching correctly but when user remove query from search box it break the application flow . 问题是,当用户在搜索框中键入某些内容时,记录将正确提取,但是当用户从搜索框中删除查询时,它将中断应用程序流程。 I mean to say that It showing all data not like 5 .
我的意思是说它显示的不是5的所有数据。 I want that when user search something and remove text from search box it might not break application flow it must show 5 records after do query search .
我希望当用户搜索某些内容并从搜索框中删除文本时,它可能不会破坏应用程序流程,因此在执行查询搜索后必须显示5条记录。 I will provide code please have a look and help me to figure out if I made some mistake .
我将提供代码,请看一下,并帮助我确定是否出错。 I am beginner to React and does not have much knowledge to fix this problem .
我是React的初学者,没有足够的知识来解决此问题。 Thanks Code
感谢代码
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
Item: 5,
skip: 0
}
this.handleClick = this.handleClick.bind(this);
}
urlParams() {
return `http://localhost:3001/meetups?filter[limit]=${(this.state.Item)}&&filter[skip]=${this.state.skip}`
}
handleClick() {
this.setState({skip: this.state.skip + 1})
}
render() {
return (
<div>
<a href={this.urlParams()}>Example link</a>
<pre>{this.urlParams()}</pre>
<button onClick={this.handleClick}>Change link</button>
</div>
)
}
}
ReactDOM.render(<Example/>, document.querySelector('div#my-example' ))
I think, you need to change your searchHandler
method and just clear filtered
param when search keyword's length is 0. 我认为,您需要更改
searchHandler
方法,并在搜索关键字的长度为0时清除filtered
参数。
searchHandler(event){
const keyword = event.target.value
const filtered = !keyword.length ? [] : this.state.allData.filter((item) => (item.companyName.indexOf(keyword) > -1))
this.setState({ filtered })
}
I think, It is because you are mutating state directly in searchHandler function. 我认为,这是因为您直接在searchHandler函数中更改了状态。 Can you try this?
你可以试试这个吗?
searchHandler(event){
let keyword =event.target.value;
const data = [...this.state.allData];
let filtered = data.filter((item)=>{
return item.companyName.indexOf(keyword) > -1
});
this.setState({
filtered
})
}
The problem is that when you empty the searchbox, keyword becomes "". 问题在于,当您清空搜索框时,关键字变为“”。 You then check
str.indexOf("")
returns 0 which means your filter operation returns all items (like you are seeing)!!! 然后,您检查
str.indexOf("")
返回0,这意味着您的过滤器操作将返回所有项目(如您所见)!
This returns everything when keyword is "": 当关键字为“”时,将返回所有内容:
let filtered=this.state.allData.filter((item)=>{
return item.companyName.indexOf(keyword) > -1
});
To fix it - simply return [] if keyword is empty ("") 要解决此问题-如果关键字为空(“”),只需返回[]
searchHandler(event){
let keyword =event.target.value;
let filtered=this.state.allData.filter((item)=>{
return item.companyName.indexOf(keyword) > -1
});
if (keyword === "") {
filtered = [];
}
this.setState({
filtered
})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.