使用react，react-router和redux进行分页

Posted 2021-05-01

所以我正在使用react，react-router v4，react-router-redux和react-redux创建一个电子商务网站。

我有一个产品页面，列出了所有产品。产品列表在我的redux商店中。我这样做，因为我可以使用品牌过滤器和价格范围过滤器将相关产品重新呈现到我的列表中。

我现在想做的是每页列出一定数量的产品，并有一个分页允许我循环浏览产品页面。

我找到了添加分页的方法，我认为这部分看起来很简单。我正在努力的部分是如何告诉我的组件在分页周期的每一页上呈现哪些产品？

这就是我的容器组件现在的样子：

import React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';

import changeBrandFilter from '../actions/changeBrandFilter';
import changePriceFilter from '../actions/changePriceFilter';

import KitsOverview from './KitsOverview';
import Filter from './Filter';
import ProductsListItem from './ProductsListItem';
import FilterCSS from './Filter.css';

class KitsPage extends React.Component{
    createBrandFilterList() {
        return this.props.brandFilters.map(filter => {
            return (
                <Filter
                    key={filter.brand}
                    id={filter.brand}
                    changeFilter={() => this.props.changeBrandFilter(filter)}
                    inuse={filter.inuse}
                    disabled={filter.disabled}
                />
            )
        })
    }
    createPriceRangeFilterList() {
        return this.props.priceRangeFilters.map(filter => {
            return (
                <Filter
                    key={filter.priceRange}
                    id={filter.priceRange}
                    changeFilter={() => this.props.changePriceFilter(filter)}
                    inuse={filter.inuse}
                    disabled={filter.disabled}
                />
            )
        })
    }
    createKitsProductsList() {
        if(this.props.products.length > 0) {
            return this.props.products.map(product =>{
                return (
                    <ProductsListItem
                        key={product.id}
                        brand={product.brand}
                        model={product.model}
                        price={product.price}
                        image={product.image}
                        link={"/kitproducts/"+product.id}
                    />
                )
            })} else {
                return <div>No products match the filter criteria selected above.</div>
            } 
    }
    render () {
        return (
            <div>
              <div className="container">
                <div className="row">
                    <KitsOverview />
                </div>
                <div className="row">
                    <div className="filtersList col-md-6 col-xs-12">
                        Filter by Brand:
                        <div>
                            {this.createBrandFilterList()}
                        </div>
                    </div>
                    <div className="filtersList col-md-6 col-xs-12">
                        Filter by Price Range:
                        <div>
                            {this.createPriceRangeFilterList()}
                        </div>
                    </div>
                </div>
                <div className="row">
                    <div>
                        {this.createKitsProductsList()}
                    </div>
                </div>
              </div>
            </div>
        )
    }
};

function mapStateToProps(state) {
    let brandFilters = state.kitsBrandFilters;
    let priceRangeFilters = state.kitsPriceRangeFilters;
    let products = state.kitsProducts;
    let filtered_products = products;
    let activeBrandFilters = brandFilters.filter(
        item => item.inuse === true
    );
    activeBrandFilters.forEach(filter => {
        filtered_products = filtered_products.filter(
            product => product.brand === filter.brand
        )
    });
    let activePriceRangeFilters = priceRangeFilters.filter(
        item => item.inuse === true
    );
    activePriceRangeFilters.forEach(filter => {
        filtered_products = filtered_products.filter(
            product => product.priceRange === filter.priceRange
        );
    });
    return {
    brandFilters: brandFilters,
    priceRangeFilters: priceRangeFilters,
    products: filtered_products
    };
};

function matchDispatchToProps(dispatch){
    return bindActionCreators({changeBrandFilter: changeBrandFilter, changePriceFilter: changePriceFilter}, dispatch);
};

export const KitsPageContainer = connect(mapStateToProps, matchDispatchToProps)(KitsPage);

答案

好的，几个月后我恢复了我的应用程序/网站的工作，并开始解决这个问题，忘记了我原本在这里寻求帮助！

幸运的是，在第二次发布问题并完成我的应用程序后，我确实找到了解决方案。

请查看我的新尝试和解决方案的帖子：

Getting paginator from react-js-pagination to display on page