自定义分页和过滤在 React JS 中不起作用

Question

我想用 api 进行分页，当我用 NO 过滤时，当我想转到该过滤器中的下一页时，它会重定向到默认过滤器，下面是我的代码 我想用 api 进行分页，当我用 NO 过滤时，当我想转到该过滤器中的下一页时，它会重定向到默认过滤器，下面是我的代码

        try {

                let val = (typeof status[0] == "undefined" ? '' : status[0]);
                if(val.toLowerCase() === 'yes'){
                    val = false;
                } else {
                    val = true;
                }

                let res = await axios(`${process.env.REACT_APP_API_URL}messages?page=${page}&limit=10&limit=10&status=${val}`, {
                    headers: {
                        "x-access-token": cookies.get("token"),
                        "Content-Type": "application/json",
                    },
                });

                console.log(res,'test')
                setData({ tableData: res.data.messages, isFetching: false });
                setCurrentPage(res.data.currentpage);


        } catch (err) {
            console.log("############");
        }
    };
  let opt = {
        selectableRows: "none",
        responsive: "scrollFullHeight",
        serverSide: true,
        count: count,
        onTableChange: (action, tableState) => {
            // a developer could react to change on an action basis or
            // examine the state as a whole and do whatever they want

            switch (action) {
                case "changePage":
                    fetchData1(tableState.page,tableState.rowsPerPage);
                    break;
                case "filterChange":
                    fetchData1(tableState.page,tableState.rowsPerPage,tableState.filterList[4]);
                    break;

            }
        }
    }

 <React.Fragment>
            {data.isFetching ? (
                <div className={classes.progressBarCont}>
                    <CircularProgress color="secondary" />
                </div>
            ) : (
                <React.Fragment>
                    <PageTitle title="List Of Messages" />
                    <Grid container spacing={3}>
                        <Grid item xs={12}>
                            <MUIDataTable
                                title="Messages List"
                                data={messageArr}
                                columns={[
                                    {
                                        name: "room",
                                        label: "Room",
                                        options: {
                                            filter: true,
                                            sort: true,
                                        },
                                    },
                                    {
                                        name: "sender",
                                        label: "Sender",
                                        options: {
                                            filter: false,
                                        },
                                    },
                                    {
                                        name: "message",
                                        label: "Message",
                                        options: {
                                            filter: false,
                                        },
                                    },
                                    {
                                        name: "sender",
                                        label: "Sender",
                                        options: {
                                            filter: false,
                                        },
                                    },
                                    {
                                        name: 'unanswered',
                                        label: 'Status',
                                        options: {
                                            filterType: 'dropdown',
                                            customFilterListRender: value => `Status: ${value}`,
                                            filterOptions: {
                                                names: ["No","Yes"],
                                                logic(unanswered, filters) {

                                                }
                                            },
                                        },
                                    },
                                ]}
                                options={opt}
                            />
                        </Grid>
                    </Grid>
                </React.Fragment>
            )}
            <ToastContainer />
        </React.Fragment> ```

Answer 1

首先你没有使用 page 你选择 json 进行分页。你必须使用这样的页面：

let opt = {
    selectableRows: "none",
    responsive: "scrollFullHeight",
    serverSide: true,
    count: count,
    page: page,
    onTableChange: (action, tableState) => {
            switch (action) {
                case "changePage":
                case "changeRowsPerPage":
                    changePage(tableState);
                    break;
                case "search":
                    search(tableState);
                    break;
            }
        },

然后你应该编写两个函数 changePage 并搜索你应该在哪里调用你的 api。但请记住，您必须使用 searchText、过滤条件和页面信息（如 pageNo、rowsPerPage 等）存储正确的 tableState。