Javascript 使用Array.splice时的分页

我正在向我的应用程序呈现卡片列表。总共有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>}

const[spliceParams，setSpliceParams]=useState({
开始：0，
完:3
})
常量跳转=（）=>{
如果（拼接参数拼接开始>=支柱卡车长度）{
塞斯普利塞帕姆斯({
拼接开始：支柱.卡车.长度-1，
拼接结束：拼接参数。拼接开始+3
})
}否则{
塞斯普利塞帕姆斯({
拼接开始：拼接参数。拼接开始+3，
接头端：接头参数。接头端+3
})
}
}
常量反转=（）=>{
塞斯普利塞帕姆斯({
拼接开始：拼接参数。拼接开始-3，
接头端：接头参数。接头端-3
})
} 
{！props.cuisineTypeMode&&
附近的卡车
查看所有

{props.trucks&&（props.trucks）.slice（拼接参数拼接开始，拼接参数拼接结束）.map（truck=>(
选择卡车（truck.id）}>
0？“fas fa heart”：“far fa heart”}
onClick={filterThroughFavs（truck.id）.length>0？e=>removeFromFavorites（e，truck.id）：e=>addToFavs（e，truck.id）}
/>
{truck.name}
{truck.avg_rating}
{truck.couring_type}
{卡车距离[truck.index]}
{/*{console.log（`props.location:${props.location}，truck.current_location:${truck.current_location}，返回：${getTruckDistance（props.location，truck.current_location）}`）
{console.log（getTruckDistance（props.location，truck.current_location））}*/}
))}
}

---

示例代码，您可以相应地增强

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>)
  }
}

类产品{
构造函数（）{
this.state.currentIndex=0；
这个.noOfElement=3
}
onNext（）{
const currentIndex=Math.min（this.state.currentIndex+this.noOfElement，props.trucks.length）
这是我的国家({
当前索引
})
}
onPrev（）{
const currentIndex=Math.max（this.state.currentIndex-this.noOfElement，0）
这是我的国家({
当前索引
})
}
render（）{
返回(
{props.trucks&&（props.trucks）.slice（this.state.currentIndex，this.state.currentIndex+this.noOfElement）.map（truck=>(
选择卡车（truck.id）}>
))}
)
}
}

维护开始和结束变量，在下一次/上一次单击时递增/递减3，并检查边界条件（不小于0，不小于卡的最大长度等），使用

中的开始和结束变量。slice（）

尝试您的代码。这对我不起作用。我不认为Nooflement可以像你一样硬编码为3。因为Array.slice的工作方式，第二个参数是数组的截止点，而不是数组中要显示的元素数，我相信你是这样假设的。哦，是的！打字错误只是为了避免硬编码