我正在通过API从服务器获取记录,API是在Loopback中构建的。实际上,我在每个页面上都显示5条记录,目前工作正常,我可以通过分页按钮导航next
或prev
,并且在每页上显示5条记录。问题是,当用户在搜索框中键入某些内容时,记录将正确提取,但是当用户从搜索框中删除查询时,它将中断应用程序流程。我的意思是说它显示的不是5的所有数据。我希望当用户搜索某些内容并从搜索框中删除文本时,它可能不会破坏应用程序流程,因此在执行查询搜索后必须显示5条记录。我将提供代码,请看一下,并帮助我确定是否出错。我是React的初学者,没有足够的知识来解决此问题。谢谢
代码
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' ))
答案 0 :(得分:2)
我认为,当搜索关键字的长度为0时,您需要更改searchHandler
方法并清除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 })
}
答案 1 :(得分:1)
我认为,这是因为您直接在searchHandler函数中对状态进行了变异。你可以试试吗?
{
"exception": "moodle_exception",
"errorcode": "forcepasswordchangenotice",
"message": "error/forcepasswordchangenotice"
}
答案 2 :(得分:1)
问题在于,当您清空搜索框时,关键字变为“”。然后,您检查str.indexOf("")
返回0,这意味着您的过滤器操作将返回所有项目(如您所见)!
当关键字为“”时,它将返回所有内容:
let filtered=this.state.allData.filter((item)=>{
return item.companyName.indexOf(keyword) > -1
});
要解决此问题-如果关键字为空(“”),只需返回[]
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
})
}