reactjs - 来自 material-ui 的 DataTables 分页不起作用

Question

我已经定义了一个显示一些推荐产品的表格:

<DataTables
     height={'auto'}
     selectable={false}
     showRowHover={true}
     columns={RECOMMENDED_TABLE_COLUMNS}
     data={this.state.products}
     showCheckboxes={false}
     rowSizeLabel="Filas por página"
     page={1}
     rowSize={10}
     rowSizeList={[10,20,30,50]}
       />

调用的表如下:

const RECOMMENDED_TABLE_COLUMNS = [
    {
        key: 'name',
        label: 'Producto',
        style:{width: '65%'}
    }, {
        key: 'price',
        label: 'Precio del producto',
        style:{width: '35%'},
        render: (amount) => {
            return amount + ' ' + currencyToAppend;
        }
    }
];

数据来自这个函数:

getProducts(){
        fetch(
            DOMAIN+'/api/products/', {
                method: 'get',
                dataType: 'json',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'Authorization':'Bearer '+this.props.token
                }
            })
            .then((response) => response.json())
            .then((responseData) => {
                responseData.map((value)=>{
                    if(value.brand)value.brand=value.brand.name;
                    if(value.price)value.priceFormatted=value.price.toFixed(2).toString().replace('.',',')+' €';
                    return true;
                });
                this.setState({products:responseData})
            })
            .catch(function(e) {
                console.log(e);
            });
    }

调用于:

handleCellClick(y,x,row){
        this.setState({
            open:true,
            slideIndex: 0,
            newForm:false,
            customer:{...row}
        });
        this.getProfiles();
        this.getHistory();
        this.getProducts();
    }

我能够在表格中打印我想要的所有产品:

当我想对其进行分页时，问题就来了，每页显示 10 个产品，它只显示数据库中的所有产品:

我使用的包如下:MATERIAL-UI PACKAGE

我做错了什么？我是否放弃了 DataTables 中的任何属性？

为@abdul 编辑:

当我点击箭头时，下一页和上一页工作，但没有任何变化；它继续在单个页面中显示来自数据库的所有 72 个结果。

捕获缩小(捕获是从列表底部开始的，但我可以向上滚动到顶部，显示其余结果):

Answer 1

我认为它不显示特定选定行数的原因在于您呈现行的方式。分页和表格没有联系，详细查看文档演示代码:

        <TableBody>
          {rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(row => (
            <TableRow key={row.id}>
              <TableCell component="th" scope="row">
                {row.name}
              </TableCell>
              <TableCell align="right">{row.calories}</TableCell>
              <TableCell align="right">{row.fat}</TableCell>
            </TableRow>
          ))}
          {emptyRows > 0 && (
            <TableRow style={{ height: 48 * emptyRows }}>
              <TableCell colSpan={6} />
            </TableRow>
          )}
        </TableBody>

row.slice 旨在根据您的分页调整行数。我希望这会有所帮助。