首页 > 解决方案 > React 表显示完整数据而不是 20 个项目的页面

问题描述

我尝试过的是:- 设置 pageSize={20} 或 defaultPageSize={20},或两者兼而有之。我的组件仍在渲染我所有数据的列表,不管我是否传递了 pageSize 道具。我在这里想念什么?我有一张类似的桌子,里面有那些道具,它正在工作。找不到问题出在哪里。


const VehiclesList = ({loading, setLoading}) => {

    return (
        <div className={classes.VehiclesList}>
            {loading ? null :
            <Row>
                <Col md="12">
                    <Card className="main-card mb-3">
                        <CardBody>
                            <ReactTable data={vehicleList? vehicleList.vehicleList.data : []}
                            columns={[CUTED NOT TO BOTHER YOU]}
                            pageSize={20}
                            manual
                            page={3}
                            loading={false}
                            loadingText="Chargement..."
                            nextText="Suivant"
                            previousText="Précédent"
                            noDataText="Aucune données correspondantes"
                            showPageSizeOptions={false}
                            className="-striped -highlight"
                            />
                        </CardBody>
                    </Card>
                </Col>
            </Row>
        }
            
        </div>
    )
}

export default VehiclesList;

标签: reactjsreact-table

解决方案


manual从道具中取出。这个道具告诉 react-table 你将在服务器端处理事情。


推荐阅读