Question

在我的MuiTable中，我有：

        <MuiTable
        padding="dense"
        data={pageData}
                    pagination={{ 
                        count: data ? data.length : 0,
                        rowsPerPage: count,
                            page: page - 1,
                            rowsPerPageOptions: [10, 25, 100, 500],
                            onChangePage: this.handlePageChange,
                            onChangeRowsPerPage: this.handleCountChange, 
                        }}

和

const mapStateToProps = (state , props) => {
const search: any = deparamSearch(props.location.search);

return {
    orders: (state.orders.list || []),
    page: Number.parseInt(search.page || 1),
    count: search.count || 10,
};
};

const mapDispatchToProps = (dispatch) => ({
    fetchOrders: (values, search?) => dispatch(fetchOrders(values, search)),
});

并得到警告：

Warning: Failed prop type: Invalid prop `rowsPerPage` of type `string` supplied to `TablePaginationActions`, expected `number`

当我在进行这些计算时没有错误时，count似乎是一个字符串：

const data = orders;
const start = count * (page - 1);
const pageData = data && data.slice(start, start + count);

和我的后端文件中：

public abstract Optional<Integer> count();
public abstract Optional<Integer> page();

我不明白count是字符串的原因。

Answer 1

好吧，计数来自这一行：

const search: any = deparamSearch(props.location.search);

props.location.search最有可能是字符串。您需要将其设置为数字，例如：

count: Number(search.count) || 10

此外，您可以执行'5' * 3并返回15。这是因为javascript由于操作符'5'

而将字符串*强制转换为数字

Answer 2

您的数据库出了点问题。您可能将数据作为字符串，可以确认其为数字：

rowsPerPage: +count // +'3' ==> 3

旁注：在反应中，如果prop类型是数字，则它必须是数字，但字符串格式（例如“ 34”）的数字无效。

反应中字符串类型无效的prop

2 个答案: