Reactjs 服务器端分页数据的React表slow useState

我正在尝试使用服务器端分页和react表过滤

我的表组件看起来像：

const TbodyComponent = props => {
    for (let i = 0; i < props.children[0].length; i++) {
        props.children[0][i] = React.cloneElement(props.children[0][i], { minWidth: props.style.minWidth })
    }

    return <div className="rt-tbody">{props.children}</div>
};

const TrGroupComponent = props => {
    return <div className="rt-tr-group" role="rowgroup" style={{ minWidth: props.minWidth }}>{props.children}</div>
};

const UsersTable = props => {
    const [ loading, setLoading ] = useState(false);
    const [ tblData, setTblData] = useState([]);
    const [ allToggled, setAllToggled ] = useState(false);
    const [ toggled, setToggled ] = useState(Array.from(new Array(tblData.length), () => false));
    const [ selected, setSelected ] = useState([]);

    useEffect(() => {
        const params = {
            page: 1,
            sorted: {
                id: null,
                desc: null
            },
            searchText: ""
        }
        callListApi(params)
    }, []);

    const handleToggleAll = allToggled => {
        let selectAll = !allToggled;
        setAllToggled(selectAll);
        let toggledCopy = [];
        let selectedCopy = [];
        tblData.forEach(function (e, index) {
            toggledCopy.push(selectAll);
            if(selectAll) {
                selectedCopy.push(index);
            }
        });
        setToggled(toggledCopy);
        setSelected(selectedCopy);
    };

    const handleToggle = index => {
        let toggledCopy = [...toggled];
        toggledCopy[index] = !toggledCopy[index];
        setToggled(toggledCopy);
        if( toggledCopy[index] === false ){
            setAllToggled(false);
        }
        else if (allToggled) {
            setAllToggled(false);
        }
    };

    const callListApi = (params) => {
        console.log('params', params)
        setLoading(true);
        let url = APIhost + "/users";
        let options = {
            headers: {
                "Access-Control-Allow-Origin": "*",
            },
            credentials: "include"
        };

        axios.get(url, options)
            .then(response => {
                data = response.data;
                console.log("Data " + JSON.stringify(data));
                setTblData(data);
                setLoading(false);
            })
            .catch((error) => {
                setLoading(false);
                console.log("System error : " + error);
            });

        console.log("again: " + JSON.stringify(data));
    };

    const onChangePageGetData = state => {

                callListApi()

    };

    const columns = useMemo(
        () => [
            {
                Header: state => (
                    <input
                        type="checkbox"
                        checked={allToggled}
                        onChange={() => handleToggleAll(allToggled)}
                    />
                ),
                Cell: row => (
                    <input
                        type="checkbox"
                        checked={toggled[row.index]}
                        onChange={() => handleToggle(row.index)}
                    />
                ),
                className: "text-center sticky",
                headerClassName: "react-table-header-checkbox sticky",
                width: 35,
            },
            { //usual react-table stuff here to populate data
            },
            ]
    );

    return (
        <div className="component-card react-table">
                <ReactTable
                    className="-striped -highlight"
                    style={{
                        border: "none",
                        boxShadow: "none",
                        height: "470px",
                        fontSize: "0.75rem"
                    }}
                    data={tblData}
                    columns={columns}
                    showPagination={true}
                    pageSizeOptions = {[50, 100, 200, 500]}
                    defaultPageSize = {50}
                    sortable={false}
                    resizable={false}
                    TbodyComponent={TbodyComponent}
                    TrGroupComponent={TrGroupComponent}
                    manual
                    loading={loading}
                    LoadingComponent={Loading}
                    onFetchData={onChangePageGetData}
                    getTrProps={(state, rowInfo, column, instance) => {
                        if (rowInfo && rowInfo.row) {
                            return {
                                onClick: (e, handleOriginal) => {
                                    let present = selected.indexOf(rowInfo.index);
                                    let selectedCopy = selected;

                                    if (present === -1){
                                        selected.push(rowInfo.index);
                                        setSelected(selected);
                                    }

                                    if (present > -1){
                                        selectedCopy.splice(present, 1);
                                        setSelected(selectedCopy);
                                    }

                                    handleToggle(rowInfo.index);
                                },
                                style: {
                                    background: selected.indexOf(rowInfo.index)  > -1 ? "#ECECEC" : "white",
                                    color: selected.indexOf(rowInfo.index) > -1 ? "black" : "black"
                                },
                            }
                        }
                        else {
                            return {}
                        }
                    }}
                >
                    {(state, makeTable, instance) => {
                        let recordsInfoText = "";
                        const { pageRows, pageSize, page } = state;

                        if (tblData && tblData.length > 0) {
                            let totalRecords = tblData.length;
                            let recordsCountFrom = page * pageSize + 1;
                            let recordsCountTo = recordsCountFrom + pageRows.length - 1;

                            //recordsInfoText = `${recordsCountFrom}-${recordsCountTo} of ${totalRecords} users`;
                            recordsInfoText = `${totalRecords} Users`;
                        } else recordsInfoText = "No data found";

                        return (
                            <div className="main-grid">
                                {makeTable()}
                                <div className="above-table text-left">
                                    <div className="col-sm-12">
                                        <span className="records-info">{recordsInfoText}</span>
                                    </div>
                                </div>
                            </div>
                        );
                    }}
                </ReactTable>
            </div>
        </div>
    );
};

const TbodyComponent=props=>{
for（设i=0；i{
返回{props.children}
};
const UsersTable=props=>{
const[loading，setLoading]=useState（false）；
常量[tblData，setTblData]=useState（[]）；
const[allToggled，setAllToggled]=useState（false）；
const[toggled，setToggled]=useState（Array.from（newarray（tblData.length），（）=>false））；
const[selected，setSelected]=useState（[]）；
useffect（（）=>{
常量参数={
页码：1，
分类：{
id:null，
desc:null
},
搜索文本：“
}
callListApi（参数）
}, []);
const handleToggleAll=allToggled=>{
让selectAll=！allToggled；
setAllToggled（选择全部）；
让toggledCopy=[]；
让selectedCopy=[]；
tblData.forEach（函数（e，索引）{
切换复制。推送（选择全部）；
如果（选择全部）{
选择复制。推送（索引）；
}
});
设置切换（切换复制）；
选择设置（选择复制）；
};
const handleToggle=索引=>{
让toggledCopy=[…toggled]；
toggledCopy[index]=！toggledCopy[index]；
设置切换（切换复制）；
如果（切换复制[索引]==false）{
setAllToggled（假）；
}
else if（全部切换）{
setAllToggled（假）；
}
};
常量callListApi=（参数）=>{
console.log（'params'，params）
设置加载（真）；
让url=APIhost+“/users”；
让选项={
标题：{
“访问控制允许来源”：“*”，
},
凭据：“包括”
};
get（url、选项）
。然后（响应=>{
data=response.data；
log（“数据”+JSON.stringify（数据））；
setTblData（数据）；
设置加载（假）；
})
.catch（（错误）=>{
设置加载（假）；
日志（“系统错误：+错误”）；
});
log（“再次：+JSON.stringify（数据））；
};
const onChangePageGetData=state=>{
callListApi（）
};
const columns=useMoom(
() => [
{
标题：state=>(
handleToggleAll（所有切换）}
/>
),
单元格：行=>(
handleToggle（row.index）}
/>
),
类名：“文本中心粘性”，
headerClassName：“反应表标题复选框粘性”，
宽度：35，
},
{//react通常使用表填充数据
},
]
);
返回(
{
if（rowInfo&&rowInfo.row）{
返回{
onClick：（e，handleOriginal）=>{
让present=selected.indexOf（rowInfo.index）；
让selectedCopy=selected；
如果（存在==-1）{
选中。推送（行信息索引）；
已选（已选）；
}
如果（当前>-1）{
选择复制拼接（存在，1）；
选择设置（选择复制）；
}
handleToggle（行信息索引）；
},
风格：{
背景：选中.indexOf（rowInfo.index）>-1？#ECECEC:“白色”，
颜色：选中。indexOf（rowInfo.index）>-1？“黑色”：“黑色”
},
}
}
否则{
返回{}
}
}}
>
{（状态、生成表、实例）=>{
让recordsInfoText=“”；
const{pageRows，pageSize，page}=状态；
if（tblData&&tblData.length>0）{
让totalRecords=tblData.length；
让recordScontFrom=page*pageSize+1；
让RecordScontTo=RecordScontFrom+pageRows.length-1；
//recordsInfoText=`${RecordsOnFrom}-${RecordsOnTo}个${totalRecords}用户`；
recordsInfoText=`${totalRecords}用户`；
}else recordsInfoText=“未找到数据”；
返回(
{makeTable（）}
{recordsInfoText}
);
}}
);
};

向控制台输出的数据几乎是即时的，但是

setTblData

需要一些时间，之后数据集没有响应（缓慢滚动、单击等）

有什么想法吗？这有什么问题

附言。 我所没有的