Question

我正在使用React-Redux来显示搜索结果。我不想显示所有结果，并希望保持最佳性能。

这是我获取和显示结果的方式：

  handleSubmit(event) {
    event.preventDefault()
    this.setState({
      searchedOnce: true
    })
    const apiSearchURL = `/api/search/religion/${this.state.formValues.religion}/gender/${this.state.formValues.gender}`
    get(apiSearchURL, { maxContentLength: 400 })
    .then((searchResults) => {
      this.props.dispatch(getSearchResults(searchResults))
    })
  }

...
...
  render() {
    const { users } = this.props
    let map_usersList = users.data && users.data.map((userlist => (
      <SearchResult key={userlist.id} {...userlist} />
    )))
...
...
...
    <ul>
    { this.state.searchedOnce
      ?  map_usersList
      :  <SearchNoResult/>
    }

    </ul>

如何在没有更多结果的情况下一次显示map_usersList-一次显示5个带有更多加载按钮的项目，并在末尾显示消息“没有更多项目”？

我正在使用Redux。搜索结果出现时，状态将显示所有结果。我在想状态第一次应该只有5个项目？我从未使用过React / Redux，所以需要一些提示。

Answer 1

您可以简单地对users.data进行切片，以一次仅显示要显示的用户数。假设您希望在“加载更多”按钮的每次单击时显示5个以上的用户，则可以按以下代码进行操作：

 constructor(){
    this.state = {
         ....
         pageNo: 1,
     }
 } 
 ....
 render() {
   const { users } = this.props
   let map_usersList = users.data && users.data.slice(0, this.state.pageNo * 5).map((userlist => (
     <SearchResult key={userlist.id} {...userlist} />
    )))
 ....
 ....
 loadMoreClick() {
   this.setState({
     pageNo: this.state.pageNo + 1,
   })
 }
 ....
 ....

<ul>
  { this.state.searchedOnce
    ?  map_usersList
    :  <SearchNoResult/>
  }
  {
    this.state.pageNo * 5 >= 400 //(maxContentLength) 
    ? 'No more items' : <LoadMoreButton />
  }
</ul>

React Redux-一次加载多个无限物品，每次x个物品

1 个答案: