Question

我在桌子上完成分页时遇到了一些问题。

这是我的表：

<Table>
    <TableHead>
        <TableRow>
            <TableCell>Username</TableCell>
            <TableCell>Log level</TableCell>
            <TableCell>Date</TableCell>
            <TableCell>Message</TableCell>
            <TableCell>Details</TableCell>
        </TableRow>
    </TableHead>

    <TableBody>
        { this.props.logs.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((el,ix) => (
        <TableRow key={ix}>
            <TableCell>{el.username}</TableCell>
            <TableCell>{el.logLevel}</TableCell>
            <TableCell>{el.createdTime}</TableCell>
            <TableCell>{el.message}</TableCell>
            <TableCell>{el.details}</TableCell>
        </TableRow>
        ) )}
    </TableBody>

    <TableFooter>
        <TableRow>
            <TablePagination component="div" count= {this.props.logs.length}
                rowsPerPage={this.props.rowsPerPage}
                page={this.props.page}
                onChangePage={this.handleNextPageClick}
                onChangeRowsPerPage={this.handleChangeRowsPerPage}
             />
        </TableRow>
    </TableFooter>
</Table>

我已设置handleNextPageClick函数在onChangePage上执行，这是函数：

handleNextPageClick(){
    this.props.dispatch(nextPage(this.props.page))
}

功能已经在顶部导入......

这是我对redux的行动：

export function nextPageClick(page){
    type: LOGS_NEXTPAGECLICK_PAGINATION,
    page
}

export function nextPage(currentPage){
    return dispatch => {
        currentPage = currentPage + 1;
        dispatch(nextPageClick(currentPage));
    }
}

这是我处理状态的reducer：

export default function logsStore(state = defaultState, action) {
    switch(action.type) {
        case actions.LOGS_NEXTPAGECLICK_PAGINATION:
            return { ...state, page: action.page}
            break;
        default:
        return state;
    }
}

Reducer有很多案例，但代码太多而且与问题无关。

因此，当我尝试在导航中选择下一页按钮时，我收到此错误：

× TypeError：无法读取未定义

的属性'Symbol（Call API）'

Answer 1

我对redux的操作没有返回锁定，现在它可以工作：

export function nextPageClick(page){
    return
    {
       type: LOGS_NEXTPAGECLICK_PAGINATION,
       page
    };
}

使用Redux和Material UI处理分页

1 个答案: