使用 Array.splice 时的分页

Question

我正在向我的应用程序呈现卡片列表。一共有13个。我需要每页显示 3 个，然后我有一个按钮可以单击以移动到下一个 3，依此类推，直到最后。我正在使用 Array.splice 方法来显示卡片。第一页的参数是 0 和 3 (props.trucks.slice(0, 3))。对于第二页，它应该是 3 和 6 (props.trucks.slice(3, 6))。单击下一页按钮应遵循该模式，直到卡片用尽。我怎样才能做到这一点？？

更新：

到目前为止，我几乎完成了，但我还没有弄清楚如何在我到达卡片末尾时阻止该功能继续运行。下面splitJump 中的代码将显示最后一张卡片。然后，如果我单击下一步，它不会显示任何内容，然后如果我再次单击它，它会再次显示最后一张卡片。

以下是相关代码：

    const [spliceParams, setSpliceParams] = useState({
        spliceStart: 0,
        spliceEnd: 3
    })

    const spliceJump = () => {
        if (spliceParams.spliceStart >= props.trucks.length) {
            setSpliceParams({
                spliceStart: props.trucks.length - 1,
                spliceEnd: spliceParams.spliceStart + 3
            })
        } else {
            setSpliceParams({
                spliceStart: spliceParams.spliceStart + 3,
                spliceEnd: spliceParams.spliceEnd + 3
            })
        }
    }

    const spliceReverse = () => {
        setSpliceParams({
            spliceStart: spliceParams.spliceStart - 3,
            spliceEnd: spliceParams.spliceEnd - 3
        })
    } 

    {!props.cuisineTypeMode && <div className="card-div">
                <div className="card-sub-div">
                    <div className="trucks-category-div">
                        <h3 className="trucks-category">Nearby Trucks</h3>
                        <p>View all</p>
                        <div className="category-pagination-arrows">
                            <div className="arrow-bg-div">
                                <i class="fas fa-arrow-left" onClick={spliceReverse}></i>
                            </div>
                            <div className="arrow-bg-div">
                                <i class="fas fa-arrow-right" onClick={spliceJump}></i>
                            </div>
                        </div>
                    </div>
                    <div className="trucks-div">
                        {props.trucks && (props.trucks).slice(spliceParams.spliceStart, spliceParams.spliceEnd).map(truck => (
                            <Card className="truck-card" onClick={() => selectTruck(truck.id)}>
                            <CardActionArea>
                                <CardMedia
                                className="truck-img"
                                image={truck.image}
                                style={{ width: '100%' }}
                                />
                                <i 
                                    className="like-icon" 
                                    class={filterThroughFavs(truck.id).length > 0 ? "fas fa-heart" : "far fa-heart"}
                                    onClick={filterThroughFavs(truck.id).length > 0 ? e => removeFromFavorites(e, truck.id) : e => addToFavs(e, truck.id)}
                                />
                                <CardContent>
                                <Typography className="truck-name" gutterBottom variant="h5" component="h2">
                                    {truck.name}
                                </Typography>
                                <Typography>
                                    {truck.avg_rating}
                                </Typography>
                                <Typography className="cuisine-type" component="h3">{truck.cuisine_type}</Typography>
                                <Typography className="distance-plus-rating" component="h3">
                                    {truckDistance[truck.index]}
                                    {/* {console.log(`props.location: ${props.location}, truck.current_location: ${truck.current_location}, returns: ${getTruckDistance(props.location, truck.current_location)}`)}
                                    {console.log(getTruckDistance(props.location, truck.current_location))}   */}
                                </Typography>
                                </CardContent>
                            </CardActionArea>
                        </Card>
                        ))}
                    </div>
                </div>
            </div>}

Answer 1

示例代码，您可以进行相应的增强。

class Products {

  constructor() {
    this.state.currentIndex = 0;
    this.noOfElement = 3
  }
  onNext() {
    const currentIndex = Math.min(this.state.currentIndex + this.noOfElement, props.trucks.length)
    this.setState({
      currentIndex
    })
  }
  onPrev() {
    const currentIndex = Math.max(this.state.currentIndex - this.noOfElement, 0)
    this.setState({
      currentIndex
    })
  }
  render() {
    return (<div className="trucks-div">
      {props.trucks && (props.trucks).slice(this.state.currentIndex, this.state.currentIndex + this.noOfElement).map(truck => (
        <Card className="truck-card" onClick={() => selectTruck(truck.id)}>

        </Card>
      ))}
    </div>)
  }
}