使用 Array.slice 對卡片列表進行分頁

Question

我正在向我的應用程序呈現卡片列表。 共有 13 個。 我需要每頁顯示 3 個，然后我有一個按鈕，可以單擊該按鈕移動到下一個 3 個，依此類推直到結束。 我正在使用 Array.slice 方法來顯示卡片。 第一個頁面的參數是 0 和 3（ props.trucks.slice(0, 3) ）。 對於第二頁，它應該是 3 和 6（ props.trucks.slice(3, 6) ）。 單擊下一頁按鈕應遵循該模式，直到卡片用完為止。

我為我需要此上一次/下一次單擊功能的兩組卡片提出了兩組功能。 我使用的邏輯遇到了問題。 例如，一旦我到達“Nearby Trucks”卡片的末尾並嘗試通過單擊具有前一個函數的按鈕繼續前進，它會將 .slice 方法中的第一個索引設置為 -3，從而將所有內容都扔掉。 一旦我到達“附近卡車”卡片的末尾，.splice 中第一個參數的索引是 12。為什么它從 12 變為 -3。 有人可以看看我的代碼並告訴我我在這里做錯了什么嗎？

    const [nearbySliceParams, setNearbySliceParams] = useState({
        nearbyStart: 0,
        nearbyEnd: 3,
    })

    const [favsSliceParams, setFavsSliceParams] = useState({
        favsStart: 0,
        favsEnd: 3
    })

    const sliceJumpNearby = () => {
        console.log(nearbySliceParams);
        if (nearbySliceParams.nearbyStart >= props.trucks.length - 3) {
            setNearbySliceParams({
                nearbyStart: nearbySliceParams.nearbyStart,
                nearbyEnd: nearbySliceParams.nearbyEnd
            })
        } else {
            setNearbySliceParams({
                nearbyStart: nearbySliceParams.nearbyStart + 3,
                nearbyEnd: nearbySliceParams.nearbyEnd + 3
            })
        }
    }

    const sliceReverseNearby = () => {
        console.log(nearbySliceParams);
        if (nearbySliceParams.nearbyStart = 0) {
            setNearbySliceParams({
                nearbyStart: nearbySliceParams.nearbyStart,
                nearbyEnd: nearbySliceParams.nearbyEnd
            })
        } else {
            setNearbySliceParams({
                nearbyStart: nearbySliceParams.nearbyStart - 3,
                nearbyEnd: nearbySliceParams.nearbyEnd - 3
            })
        }
    }

    const sliceJumpFavs = () => {
        console.log(favsSliceParams);
        if (favsSliceParams.favsStart >= props.favTrucks.length - 3) {
            setFavsSliceParams({
                favsStart: favsSliceParams.favsStart,
                favsEnd: favsSliceParams.favsEnd
            })
        } else {
            setFavsSliceParams({
                favsStart: favsSliceParams.favsStart + 3,
                favsEnd: favsSliceParams.favsEnd + 3
            })
        }
    } 

    const sliceReverseFavs = () => {
        console.log(favsSliceParams);
        if (favsSliceParams.favsStart = 0) {
            setFavsSliceParams({
                favsStart: 0,
                favsEnd: 3
            })
        } else {
            setFavsSliceParams({
                favsStart: favsSliceParams.favsStart - 3,
                favsEnd: favsSliceParams.favsEnd - 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={sliceReverseNearby}></i>
                            </div>
                            <div className="arrow-bg-div">
                                <i class="fas fa-arrow-right" onClick={sliceJumpNearby}></i>
                            </div>
                        </div>
                    </div>
                    <div className="trucks-div">
                        {props.trucks && (props.trucks).slice(nearbySliceParams.nearbyStart, nearbySliceParams.nearbyEnd).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>}

            {!props.cuisineTypeMode && <div className="card-div">
                <div className="card-sub-div">
                    <div className="trucks-category-div">
                        <h3 className="trucks-category">Your Favorites</h3>
                        <p>View all</p>
                        <div className="category-pagination-arrows">
                            <div className="arrow-bg-div">
                                <i class="fas fa-arrow-left" onClick={sliceReverseFavs}></i>
                            </div>
                            <div className="arrow-bg-div">
                                <i class="fas fa-arrow-right" onClick={sliceJumpFavs}></i>
                            </div>
                        </div>
                    </div>
                    <div className="trucks-div">
                        {props.favTrucks && props.favTrucks.slice(favsSliceParams.favsStart, favsSliceParams.favsEnd).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={(e) => removeFromFavorites(e, truck.id)}
                                    />
                                    <CardContent className="truck-contents">
                                    <Typography className="truck-name" gutterBottom variant="h5" component="h2">
                                        {truck.name}
                                    </Typography>
                                    <Typography className="cuisine-type" component="h3">{truck.cuisine_type}</Typography>

                                    </CardContent>
                                </CardActionArea>
                            </Card>
                        ))}
                    </div>
                </div>
            </div>}

Answer 1

我想通了！ 問題是在 sliceReverseNearby 和 sliceReverseFavs 中，我在 if 語句中有一個混淆。 我在需要使用比較運算符的地方使用賦值運算符。

不正確的代碼：

        if (nearbySliceParams.nearbyStart = 0) {
            setNearbySliceParams({
                nearbyStart: nearbySliceParams.nearbyStart,
                nearbyEnd: nearbySliceParams.nearbyEnd
            })
        }

        if (favsSliceParams.favsStart = 0) {
            setFavsSliceParams({
                favsStart: 0,
                favsEnd: 3
            })
        }

應該：

        if (nearbySliceParams.nearbyStart === 0) {
            setNearbySliceParams({
                nearbyStart: nearbySliceParams.nearbyStart,
                nearbyEnd: nearbySliceParams.nearbyEnd
            })

        if (favsSliceParams.favsStart = 0) {
            setFavsSliceParams({
                favsStart: 0,
                favsEnd: 3
            })
        }