在单个页面上分页显示多个框架

Question

因此，我试图在单个页面上显示多个轮播项目。我创建的分页组件工作正常，只有一次显示的时间。

但是当有多个数组时，更改一个轮播的页面会更改该页面上所有其他轮播的页面。

这是我的代码：

paginate.js

import _ from 'lodash';

export function paginate(items, pageNumber, pageSize) {
    const startIndex = (pageNumber - 1) * pageSize;
    return _(items)
        .slice(startIndex)
        .take(pageSize)
        .value();
}

Pagination.jsx

import React from 'react';
import './Pagination.scss';
import _ from 'lodash';

const Pagination = props => {
    const {itemsCount, pageSize, onPageChange, currentPage} = props;
    console.log(currentPage);
    const pagesCount = Math.ceil(itemsCount / pageSize);
    if (pagesCount === 1) return null;
    const random = Math.floor(Math.random() * 100 + 1);
    const pages = _.range(1, pagesCount + 1);

    return (
        <div className="pagination-div">
            <ul className="pagination">
                {pages.map(page => (
                    <li className="page-item" key={page}>
                        <a className="page-link" onClick={() => onPageChange(page)}>
                            <span className={page === currentPage ? 'active-dot' : 'dot'} />
                        </a>
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default Pagination;

RecipeCardsByCuisines.jsx

import React, {Component} from 'react';
import CuisineTileHeading from '../CuisineTileHeading/CuisineTileHeading';
import RecipesCards from '../RecipesCards/RecipesCards';
import MealGroupBar from '../MealGroupBar/MealGroupBar';
import {getUser, getIdClaim} from '../../actions/userActions';
import {getFavoriteRecipes} from '../../actions/assetActions';
import {connect} from 'react-redux';
import Pagination from '../Common/Pagination';
import {paginate} from '../Utils/paginate';
import axios from 'axios';

// import './CuisineView.scss';

class RecipeCardsByCuisines extends Component {
    constructor(props) {
        super(props);
        this.state = {
            pageSize: 4,
            currentPage: 1
        };
    }

    componentDidMount = async () => {
        this.props.getUser(() => {
            this.props.getIdClaim(this.props.user.profile.sub, () => {
                this.props.getFavoriteRecipes(this.props.idClaim);
                console.log(this.props.idClaim);
            });
        });
    };
    toggleFavorite = (userID, recipeId, marked) => {
        const userpreference = {
            userid: userID,
            recipe: recipeId,
            favorite: marked
        };
        console.log('Here is the userpreference', userpreference);
        console.log('here is the marked', marked);
        console.log('here is the id-claim', this.props.idClaim);
        axios
            .post('/userpreference', userpreference, {
                headers: {'id-claim': this.props.idClaim}
            })
            .then(res => console.log(res));
        this.props.getFavoriteRecipes(this.props.idClaim);
    };

    displayFavorite = recipeId => {
        let favoriteRecipes = this.props.userPreferred;
        console.log('these are favorites', favoriteRecipes);

        for (var i = 0; i < favoriteRecipes.length; i++) {
            if (favoriteRecipes[i].asset === recipeId) {
                console.log(favoriteRecipes[i].recipe);
                return true;
            } else {
            }
        }
    };

    handlePageChange = page => {
        console.log(page);
        this.setState({currentPage: page});
    };

    render() {
        let user = 'unKnown';
        const {cuisines} = this.props;
        const that = this;
        const {profile} = this.props.user;
        const {currentPage, pageSize} = this.state;

        if (profile) {
            user = this.props.user.profile.sub;
        }

        return (
            <React.Fragment>
                <div className="category-by-group-section"> 
                    <div className="category-view-second-grid">
                        {cuisines &&
                            cuisines[0] &&
                            cuisines[0].mealGroup && (
                                <MealGroupBar mealGroup={ cuisines[0].mealGroup.charAt(0).toUpperCase() + cuisiness[0].mealGroup.slice(1)
                                    }
                                />
                         )}

              {cuisines &&
                  cuisines.map(function(cuisine) {
                       return (
                         <CuisineTileHeading
                            label={cuisine.label}
                            totalNoCusineRecipes={cuisine.totalRecipes}
                            key={cuisine.id}
                         >
                         <div className="category-carousel-card-body-grid-view">
                             {cuisine.recipes &&
                                **paginate(**
                             cuisine.recipes.map(function(recipe, index) {
                               let marked = recipe.isFavorite ? 'no' : 'yes';
                                   return (
                                      <RecipesCards
                                         title={recipe.title}
                                         description={recipe.description}
                                         owner={recipe.owner}
                                          lastUpdated={recipe.lastUpdated}
                                         key={'RecipesCard' + index}
                                         thumbnail={recipe.thumbnailBase64}
                                         recipeId={recipe.id}
                                       category={category}
                                     favorite={that.displayFavorite(recipe.id)}
                                     toggleFavorite={() =>
                                                                    that.toggleFavorite(user, recipe.id, marked)
                                     }
                                    />
                                  );
                              }),
                             ****currentPage,
                            pageSize****
                           )}
                  </div>
              {category.assets && (
                  <Pagination
                        itemsCount={cuisine.recipes.length}
                        pageSize={that.state.pageSize}
                        currentPage={that.state.currentPage}
                        onPageChange={that.handlePageChange}
                                            />
                                        )}
                                    </CuisineTileHeading>
                                );
                            })}
                    </div>
                </div>
            </React.Fragment>
        );
    }
}

const mapStateToProps = state => ({
    user: state.user.user,
    idClaim: state.user.idClaim,
    userPreferred: state.asset.userPreferred
});

export default connect(mapStateToProps, {
    getUser,
    getIdClaim,
    getFavoriteRecipes
})(RecipeCardsByCuisines);