Таблица данных с помощью функции редактирования возвращает значение первой страницы на ReactJs. Зачем переходить на первую страницу?

Question

Я пытался использовать таблицу данных mdb с добавленной функцией редактирования, но с начала до следующей нумерации страниц не получал значение данных, только получал значение первой страницы. И начиная со второй до следующей нумерации страниц, вернувшись на первую страницу, получите значение. Как мне это сделать?

* Я использую следующий код в файле с именем OperatorReport.jsx: *

import React, { Component } from 'react'
import DatePicker from 'react-datepicker'
import PropTypes from 'prop-types'
import { MDBIcon } from 'mdbreact'

import { Alert, DataTable, Button } from 'shared/components'
import CallReportTableHeader from 'shared/table-headers/CallReport'

import CallEditModal from 'components/OtherComponents/CallEditModal'
import ReportServices from 'services/ReportServices'

import { dateConvertToAPI } from 'utilities/ConvertUtility'

class OperatorReport extends Component {
    constructor(props) {
        super(props)
        this.state = {
            RegData: [],
            notRegData: [],
            startDate: new Date(),
            endDate: new Date(),
            reduxData: props.reduxData,
            message: '',
            notRegCount:'0',
            RegCount:'0',
        }
        this.state.startDate.setHours(7)
        this.state.startDate.setMinutes(0)
        this.state.endDate.setHours(23)
        this.state.endDate.setMinutes(0)

        let startDate = dateConvertToAPI(this.state.startDate)
        let endDate = dateConvertToAPI(this.state.endDate)
        ReportServices.OperatorList(startDate, endDate, CallEditModal).then(res => {
            this.setState({
                RegData: res[0].data.RegData,
                notRegData: res[0].data.NotRegData,
                message: '',
                notRegCount: res[0].data.NotRegDataCount,
                RegCount: res[0].data.RegDataCount
            })
        }).catch(err => {
            this.setState({
                message: <Alert color='danger' inverse>{err}</Alert>
            })
        })
        this.onSubmit = this.onSubmit.bind(this)
    }
    componentDidMount(){
        this.state.startDate.setHours(7)
        this.state.startDate.setMinutes(0)
        this.state.endDate.setHours(23)
        this.state.endDate.setMinutes(0)
    }
    onSubmit(event) {
        event.preventDefault()
        this.setState({
            message: <Alert color='warning' inverse>Уншиж байна</Alert>
        })
        let startDate = dateConvertToAPI(this.state.startDate)
        let endDate = dateConvertToAPI(this.state.endDate)
        ReportServices.OperatorList(startDate, endDate, CallEditModal).then(res => {
            this.setState({
                RegData: res[0].data.RegData,
                notRegData: res[0].data.NotRegData,
                message: '',
                notRegCount: res[0].data.NotRegDataCount,
                RegCount: res[0].data.RegDataCount
            })
        }).catch(err => {
            this.setState({
                message: <Alert color='danger' inverse>{err}</Alert>
            })
        })
    }
    render() {
        return (
            <div className='row m-0 mt-70'>
                <h4><strong>Операторын бүртгэлийн тайлан</strong></h4>
                <div className='col-lg-12 mt-3 p-0'>
                    {this.state.message}
                    <form className='row bg-white border rounded m-0 mb-3 py-3 border border-primary' onSubmit={this.onSubmit}>
                        <div className='col-lg-4'>
                            <label className='form-label'>Эхлэх хугацаа</label>
                            <DatePicker selected={this.state.startDate} className='form-control form-control-sm border border-dark' onChange={date=> this.setState({ startDate: date })} showTimeSelect timeFormat='HH:mm' timeIntervals={15} timeCaption='time' dateFormat='MMMM d, yyyy hh:mm aa' />
                        </div>
                        <div className='col-lg-4'>
                            <label className='form-label'>Дуусах хугацаа</label>
                            <DatePicker selected={this.state.endDate} className='form-control form-control-sm border border-dark' onChange={date=> this.setState({ endDate: date })} showTimeSelect timeFormat='HH:mm' timeIntervals={15} timeCaption='time' dateFormat='MMMM d, yyyy hh:mm aa' />
                        </div>
                        <div className='col-lg-4 text-right mt-10'>
                            <Button className='rounded' color='primary' type='submit' size='md'>
                                <MDBIcon icon='search' className='mr-5' /> Хайх
                            </Button>
                        </div>
                    </form>
                </div>
                <div className='col-lg-12 p-0'>
                    <h5 className='mb-3'>Хүлээн авсан бүртгээгүй : {this.state.notRegCount}</h5>
                    <DataTable data={{ 
                        columns: CallReportTableHeader, 
                        rows: this.state.notRegData, 
                    }} />
                    <h5 className='my-3'>Хүлээн авсан бүртгэсэн : {this.state.RegCount} </h5>
                    <DataTable data={{ 
                        columns: CallReportTableHeader, 
                        rows: this.state.RegData,
                    }} />   
                </div>
            </div>
        )
    }
}

OperatorReport .propTypes = {
    reduxData: PropTypes.object,
}

export default OperatorReport 

* Я использую следующий код в файле с именем Report.jsx. : *

import React, {Fragment} from 'react'
import { MDBIcon, MDBTooltip } from 'mdbreact'
import { Button } from 'shared/components'
import { Post } from 'utilities/AxiosUtility'
import {convertSecondsToDate } from 'utilities/ConvertUtility'

export default class Report {
static async OperatorList (startDate, endDate, EditComponent) {
        let query = {
            startdate: startDate,
            enddate: endDate,
        }
        let RegisteredQuery = Object.assign({}, query)
        RegisteredQuery.type = 'callReportByAgent'
        const response = await Promise.all([
            Post('/api/CallAccountReport', RegisteredQuery),
        ])
        let success = false
        response.map(responseItem => {
            if (responseItem.status === 200) {
                if (responseItem.data.RegDataCount === '0' && responseItem.data.NotRegDataCount === '0')
                {
                    throw 'Мэдээлэл байхгүй байна.'
                }
                if (responseItem.data.RegDataCount !== '0') {
                    success = true
                    const rawData = JSON.parse(JSON.stringify(responseItem.data.RegData))
                    responseItem.data.RegData.map((item, iteration) => {

                        item.wait_time = convertSecondsToDate( item.wait_time)
                        item.talking_time = convertSecondsToDate(item.talking_time)
                        switch (item.user_type) {
                            case '1':
                                item.user_type = 'Хэрэглэгч'
                                break
                            case '2':
                                item.user_type =
                                    'Хэрэглэгч мөн картаа мэдэхгүй'
                                break
                            case '3':
                                item.user_type = 'Хэрэглэгч биш'
                                break
                            case '4':
                                item.user_type = 'MD or DEGB'
                                break
                            case '5':
                                item.user_type = 'Staffs'
                                break
                            default:
                        }
                        item.action = (
                            <Fragment>
                                <MDBTooltip domElement tag='span' placement='top'>
                                    <span>
                                        <Button
                                            className='btn-icon-circle btn-icon-style-2'
                                            color='secondary'
                                            size='sm'
                                            icon
                                            disabled={item.rec_url.length === 0}    
                                            onClick={() => window.open('http://192.168.10.194/monitor/' + item.rec_url)}
                                        >
                                            <MDBIcon icon='headphones' />
                                        </Button>
                                    </span>
                                    <span>
                                        Бичлэг сонсох
                                    </span>
                                </MDBTooltip>
                                {' '}
                                <EditComponent data={rawData[iteration]} />
                            </Fragment>
                        )
                    })
                } 
                else
                {
                    responseItem.data.RegData = []
                }
                if (responseItem.data.NotRegDataCount !== '0') {
                    success = true
                    const rawData = JSON.parse(JSON.stringify(responseItem.data.NotRegData))
                    responseItem.data.NotRegData.map((item, iteration) => {

                        item.wait_time = convertSecondsToDate( item.wait_time)
                        item.talking_time = convertSecondsToDate(item.talking_time)
                        switch (item.user_type) {
                            case '1':
                                item.user_type = 'Хэрэглэгч'
                                break
                            case '2':
                                item.user_type =
                                    'Хэрэглэгч мөн картаа мэдэхгүй'
                                break
                            case '3':
                                item.user_type = 'Хэрэглэгч биш'
                                break
                            case '4':
                                item.user_type = 'MD or DEGB'
                                break
                            case '5':
                                item.user_type = 'Staffs'
                                break
                            default:
                        }
                        item.action = (
                            <Fragment key={iteration}>
                                <MDBTooltip domElement tag='span' placement='top'>
                                    <span>
                                        <Button
                                            className='btn-icon-circle btn-icon-style-2'
                                            color='secondary'
                                            size='sm'
                                            icon
                                            disabled={item.rec_url.length === 0}    
                                            onClick={() => window.open('http://192.168.10.194/monitor/' + item.rec_url)}
                                        >
                                            <MDBIcon icon='headphones' />
                                        </Button>
                                    </span>
                                    <span>
                                        Бичлэг сонсох
                                    </span>
                                </MDBTooltip>
                                {' '}
                                <EditComponent data={rawData[iteration]} />
                            </Fragment>
                        )
                    })
                } 
                else
                {
                    responseItem.data.NotRegData = []
                }
            }
            return responseItem
        })
if (success) {
            return response
        } else {
            throw response[0].response && response[0].response.data.message + response[1].response && response[1].response.data.message
        }
}

* Я использую следующий код в файле с именем CallEdit.jsx. *

import React, { Component, Fragment } from 'react'
import PropTypes from 'prop-types'
import {
    MDBIcon,
    MDBModal,
    MDBModalHeader,
    MDBModalBody,
    MDBTooltip
} from 'mdbreact'

import { Alert, Button } from 'shared/components'
import { Post } from 'utilities/AxiosUtility'
import { AdditionalList } from 'components/OtherComponents'
import CallTypeTree from 'components/CallTypeComponents/CallTypeTree'

import CallTypeServices from 'services/CallTypeServices'
import OperatorReportServices from 'services/OperatorReportServices'

class CallEdit extends Component {
    constructor(props) {
        super(props)
        this.state = {
            message:'',
            data: props.data,
            userTypeRadio: props.data.user_type === '' ? '0' : props.data.user_type,
            reduxData: props.reduxData,
            updated: false,
            isLoading: false,
            //activeItem: '1',
            modalState: false,
            selectedOrder: props.reduxData.CallType.selectedOrder,
        }
        this.updateCallFunc = this.updateCallFunc.bind(this)
    }
    static getDerivedStateFromProps(nextProps, state) {
        state.reduxData = nextProps.reduxData
        // state.userTypeRadio = nextProps.callData && nextProps.callData.userType === '1' ? '1' : '3'
        // state.data = nextProps.callData
        return state
    }

    updateCallFunc (event) {
        event.preventDefault()
        this.setState({
            isLoading: true,
            message: <Alert color='warning' inverse>Уншиж байна...</Alert>
        })
        OperatorReportServices.Update(event, this.state.data).then(res => {
            if (res === true) this.setState({
                isLoading: false,
                message: <Alert color='success' inverse>Амжилттай хадгалагдлаа</Alert>
            })
            else this.setState({
                isLoading: false,
                message: <Alert color='danger' inverse>Алдаа гарсан байна</Alert>
            })
        }).catch(() => {
            this.setState({
                isLoading: false,
                message: <Alert color='danger' inverse>Алдаа гарсан байна</Alert>
            })
        })
    }
    render() {
        const { modalState, reduxData, data } = this.state
        const radioOnChange = event => this.setState({ userTypeRadio: event.target.value })
        const modalToggle = () => {
            let selectedOrderData = [0]
            if (this.state.data.calltype1 !== '0') selectedOrderData.push(parseInt(this.state.data.calltype1))
            if (this.state.data.calltype2 !== '0') selectedOrderData.push(parseInt(this.state.data.calltype2))
            if (this.state.data.calltype3 !== '0') selectedOrderData.push(parseInt(this.state.data.calltype3))
            if (this.state.data.calltype4 !== '0') selectedOrderData.push(parseInt(this.state.data.calltype4))
            if (this.state.data.calltype5 !== '0') selectedOrderData.push(parseInt(this.state.data.calltype5))
            if (this.state.data.calltype6 !== '0') selectedOrderData.push(parseInt(this.state.data.calltype6))
            if (this.state.data.calltype7 !== '0') selectedOrderData.push(parseInt(this.state.data.calltype7))
            if (this.state.data.calltype8 !== '0') selectedOrderData.push(parseInt(this.state.data.calltype8))
            let id = selectedOrderData[selectedOrderData.length-1]
            this.props.reduxData.CallType.totalCallTypes.map(item => {
                if (item.id === id) {
                    this.props.changeSelectedData(item) //Нэмсэн CallTypeID-нуудаа Reduxруу хийж байгаа хэсэг
                    Post('/api/getLists', { // Сонгосон CallType ийн мэдээллүүдийг авах
                        type: 'callTypeAddInfo',
                        id: item.id.toString(),
                    }).then(res => {
                        this.props.changeSelectedAdditionalList(res.data.data)
                        //console.log('aa',this.props.changeSelectedAdditionalList(res.data.data))
                    }).catch(() => {
                        this.props.changeSelectedAdditionalList([])
                    })
                }
            })
            this.props.changeSelectedOrder(selectedOrderData)
            this.setState({ modalState: !modalState })
        }
        return (
            <Fragment>
                <MDBTooltip domElement tag='span' placement='top'>
                    <span>
                        <Button className='btn-icon-circle btn-icon-style-2' color='secondary' size='sm' icon onClick={modalToggle}>
                            <MDBIcon icon='pencil-alt' />
                        </Button>
                    </span>
                    <span>
                        Засах
                    </span>
                </MDBTooltip>
                <MDBModal className='mt-70' isOpen={modalState} toggle={modalToggle} size='xl'>
                    <MDBModalHeader toggle={modalToggle}>
                        Дуудлагын бүртгэл засах
                    </MDBModalHeader>
                    <MDBModalBody>
                        <form className='row justify-content-between align-items-top' onSubmit={this.updateCallFunc}>
                            <div className='col-lg-4 mb-3 pr-0'>
                                <div className='bg-white rounded border p-3' style={{ height: '250px' }}>
                                    <div className='row justify-content-between mt-10'>
                                        <div className='col-lg-8 text-left'>
                                            <div className='form-check pl-0'>
                                                <h5 className='mt-3 mb-0'>Холбогдсон дугаар :&nbsp;</h5>
                                                <h2 className='d-inline-block'>{data.phone}</h2>
                                                <br/>
                                                <input type='radio' name='userType' id='radio1' value='1' defaultChecked={this.state.userTypeRadio === '1'} onClick={radioOnChange} />
                                                <label className='form-check-label pl-1' htmlFor='radio1'>
                                                    Хэрэглэгч
                                                </label>
                                            </div>
                                            <div className='form-check pl-0'>
                                                <input type='radio' name='userType' id='radio2' value='2' defaultChecked={this.state.userTypeRadio === '2'} onClick={radioOnChange}  />
                                                <label className='form-check-label mb-2 pl-1' htmlFor='radio2'>
                                                    Хэрэглэгч мөн картаа мэдэхгүй
                                                </label>
                                            </div>
                                            <div className='form-check pl-0'>
                                                <input type='radio' name='userType' id='radio3' value='3' defaultChecked={this.state.userTypeRadio === '3' || this.state.userTypeRadio ==='0'} onClick={radioOnChange} />
                                                <label className='form-check-label pl-1' htmlFor='radio3'>
                                                    Хэрэглэгч биш
                                                </label>
                                            </div>
                                            <div className='form-check pl-0'>
                                                <input type='radio' name='userType' id='radio4' value='4' defaultChecked={this.state.userTypeRadio === '4'} onClick={radioOnChange} />
                                                <label className='form-check-label pl-1' htmlFor='radio4'>
                                                    MD or DEGB
                                                </label>
                                            </div>
                                            <div className='form-check pl-0'>
                                                <input type='radio' name='userType' id='radio5' value='5' defaultChecked={this.state.userTypeRadio === '5'} onClick={radioOnChange} />
                                                <label className='form-check-label pl-1' htmlFor='radio5'>
                                                    Staffs
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className='col-lg-8 mb-3'>
                                <div className='bg-white rounded border p-3' style={{ height: '250px', overflowY: 'auto' }}>
                                    <div className='row'>
                                        { <AdditionalList defaultData={this.state.data} list={ reduxData.CallType.selectedAdditionalList } />}
                                    </div>
                                </div>
                            </div>
                            <div className='col-lg-12 mb-3'>
                                <div className='row justify-content-between align-items-center bg-white rounded border m-0 py-4'>
                                    <div className='col-lg-9'>
                                        <h4 className='d-inline-block float-left'>
                                            Дуудлагын төрөл
                                        </h4>
                                    </div>
                                    <div className='col-lg-3'>
                                        {CallTypeServices.SearchEngine()}
                                    </div>
                                    <div className='col-lg-12 p-3'>
                                        <CallTypeTree listOnly={true}/>
                                    </div>
                                </div>
                            </div>
                            <div className='col-lg-12 mb-3'>
                                <div className='row bg-white rounded border m-0 p-3'>
                                    <div className='col-lg-8 mb-3 pl-0'>
                                        Мэдээлэл
                                        <div className='typeInfo d-block rounded p-2' style={{ height: 'auto', border: '2px solid #E0E3E4', }} dangerouslySetInnerHTML={{ __html: reduxData.CallType.selectedData .type_info, }} />
                                    </div>
                                    <div className='col-lg-4 mb-3 p-0'>
                                        <div className='row m-0'>
                                            <div className='col-lg-12 mb-3 p-0'>
                                                Тэмдэглэл
                                                <textarea className='form-control' style={{ height: '180px' }} name='note' defaultValue={data.note} />
                                            </div>
                                            <div className='col-lg-12 p-0'>
                                                Санал хүсэлт
                                                <textarea className='form-control' style={{ height: '180px' }} name='request' defaultValue={data.request} />
                                            </div>
                                        </div>
                                    </div>
                                    {reduxData.CallType.selectedOrder[1] === 7 ? (
                                        <div className='col-lg-4 p-0'>
                                            <div className='row m-0'>
                                                <div className='col-lg-12 mb-2 p-0' >
                                                    Тicket-ийн төрөл сонгох
                                                    <select className='form-control form-control-sm' name='ticketType' required>
                                                        <option value='' selected disabled>Сонгох</option>
                                                        <option value='1'>Масс биш</option>
                                                        <option value='2'>Масс</option>
                                                    </select>
                                                </div>
                                                <div className='col-lg-12 p-0'>
                                                    Тicket-ийн явц сонгох
                                                    <select className='form-control form-control-sm' name='ticketProcess' required>
                                                        <option value='' selected disabled>Сонгох</option>
                                                        <option value='1'>Шилжүүлсэн</option>
                                                        <option value='2'>Левел 1 шийдсэн</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>): ''
                                    }
                                </div>
                            </div>
                            <div className='col-lg-12'>
                                {this.state.message}
                            </div>
                            <div className='col-lg-12'>
                                <div className='text-right'>
                                    <Button className='d-inline-block' color='success' size='sm' type='submit'>
                                        Дуудлага хадгалах
                                    </Button>
                                </div>
                            </div>
                        </form>
                    </MDBModalBody>
                </MDBModal>
            </Fragment>
        )
    }
}
CallEdit.propTypes = {
    reduxData: PropTypes.object,
    data: PropTypes.object,
    changeSelectedOrder: PropTypes.func,
    changeSelectedData: PropTypes.func,
    changeSelectedAdditionalList: PropTypes.func
}

export default CallEdit

* Я использую следующий код в файле с именем CallEdit.jsx.И, вызовите код действия edit.jsx *

import { Post } from 'utilities/AxiosUtility'
import store from 'redux/rootStore'

export default class OperatorReportServices {
    static async Update (event, data) {
        let query = {
            userType: event.target.userType.value,
            phone_no: data.number,
            unique_id: data.unique_id,
            request: event.target.request.value,
            note: event.target.note.value,
            ticket_type:
                event.target.ticketType
                    ? event.target.ticketType.value
                    : '0',
            ticket_process:
                event.target.ticketProcess
                    ? event.target.ticketProcess.value
                    : '0',
            number2:
                event.target.number2 && event.target.number2.value !== ''
                    ? event.target.number2.value
                    : '0',
            cityId:
                event.target.aimag && event.target.aimag.value !== ''
                    ? event.target.aimag.value
                    : '0',
            districtId:
                event.target.sum && event.target.sum.value !== ''
                    ? event.target.sum.value
                    : '0',
            bagId:
                event.target.bagId && event.target.bagId.value !== ''
                    ? event.target.bagId.value
                    : '0',
            cardNo:
                event.target.cardNumber && event.target.cardNumber.value !== ''
                    ? event.target.cardNumber.value
                    : '0',
            adminNumber:
                event.target.adminNumber && event.target.adminNumber.value !== ''
                    ? event.target.adminNumber.value
                    : '0',
        }
        const CallType = store.getState().CallType
        query.callType1 = CallType.selectedOrder[1]
            ? CallType.selectedOrder[1]
            : 0
        query.callType2 = CallType.selectedOrder[2]
            ? CallType.selectedOrder[2]
            : 0
        query.callType3 = CallType.selectedOrder[3]
            ? CallType.selectedOrder[3]
            : 0
        query.callType4 = CallType.selectedOrder[4]
            ? CallType.selectedOrder[4]
            : 0
        query.callType5 = CallType.selectedOrder[5]
            ? CallType.selectedOrder[5]
            : 0
        query.callType6 = CallType.selectedOrder[6]
            ? CallType.selectedOrder[6]
            : 0
        query.callType7 = CallType.selectedOrder[7]
            ? CallType.selectedOrder[7]
            : 0
        query.callType8 = CallType.selectedOrder[8]
            ? CallType.selectedOrder[8]
            : 0
        const response = await Post('/api/updateCall', query)
        if (response.status === 200) {
            window.location.reload()
            return true
        } else {
            throw false
        }
    }
}