ReactJS如何始终只显示一定数量的数组项

Question

我想显示数组中一定数量的项目，当用户单击“显示下一个”时，数组的下五个项目将可见，如项目 6-10，其中项目 0-5 将被隐藏，例如应该始终只有五个项目可见。我怎样才能做到这一点？

我尝试了以下坚果但没有成功（请参阅此处的JSFIDDLE）

class Cars extends React.Component{
   constructor(){
   super()

   this.state = {
      limit: 5,
      cars: ["Audi", "Alfa Romeo", "BMW", "Citroen", "Dacia", "Ford", "Mercedes", "Peugeot", "Porsche", "VW"]
   }
 }

  showPreviousCars() {
    // show previous 5 items
  }

  showNextCars(){
    this.setState({
       limit: this.state.limit + 5
    })
  }


 render(){
    let cars = this.state.cars.slice(0,this.state.limit);
    return(
       <div className="car-wrapper">
         <ul>
           <li><a onClick={this.showPreviousCars.bind(this)}>Previous 5</a></li>
           {cars.map((car, i) => {
              return(
                <li key={i}>{car}</li>
              )

           })}
           <li><a onClick={this.showNextCars.bind(this)}>Next 5</a></li>
        </ul>

      </div>
    )
  }
}

欢迎任何建议！

Answer 1

您可以使用（查看此处的Array.prototype.slice文档以了解要传递哪些参数）来处理数组的一部分：

cars.slice(this.state.limit, this.state.limit + 5).map(...)

编辑：两件事：

• 我看到您使用 limit 作为上限，所以要么更改它，要么使用slice(this.state.limit - 5, this.state.limit)
• 您可能也想更新您的showNextCars函数，以确保您最终不会超出数组范围