Невозможно отобразить данные в DataTable с Redux

Question

Я новичок, чтобы отреагировать,

Я получаю эту ошибку.

Я хочу отобразить данные API в Datatable с помощью BootstrapTablem, я также использовал Redux в этом и сделал некоторое состояние и Действия, которые он получает данные из API, также я прикрепил скриншот для более подробной информации * 1 Заранее спасибо

Вот мой код, я использовал шаблон на этом, и, кажется, есть проблема с классом, который я начал

import React, { Component }  from 'react';
import { Row, Col, Card, CardBody, Input, CardHeader, Badge, UncontrolledDropdown, DropdownMenu, DropdownItem, DropdownToggle } from 'reactstrap';
import BootstrapTable from 'react-bootstrap-table-next';
import ToolkitProvider, { Search, CSVExport } from 'react-bootstrap-table2-toolkit';
import paginationFactory from 'react-bootstrap-table2-paginator';
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
import { Provider } from 'react-redux';
import store from '../../../redux/store';
import { connect } from 'react-redux';
import { getAgents, deleteAgent } from '../../../redux/actions/agentActions';
import propTypes from 'prop-types';
import AgentModal from '../modals/agentModal';

import PageTitle from '../../../components/PageTitle';



const columns = [
    {
        dataField: 'id',
        text: 'ID',
        sort: true,
    },
    {
        dataField: 'name',
        text: 'Name',
        sort: true,
    },
    {
        dataField: 'phone',
        text: 'Phone Number',
        sort: false,
    },
    {
        dataField: 'age',
        text: 'Age',
        sort: true,
    },
    {
        dataField: 'company',
        text: 'Company',
        sort: false,
    },
];

const defaultSorted = [
    {
        dataField: 'id',
        order: 'asc',
    },
];


const sizePerPageRenderer = ({ options, currSizePerPage, onSizePerPageChange }) => (
    <React.Fragment>
        <label className="d-inline mr-1">Show</label>
        <Input type="select" name="select" id="no-entries" className="custom-select custom-select-sm d-inline col-1"
            defaultValue={currSizePerPage}
            onChange={(e) => onSizePerPageChange(e.target.value)}>
            {options.map((option, idx) => {
                return <option key={idx}>{option.text}</option>
            })}
        </Input>
        <label className="d-inline ml-1">entries</label>
    </React.Fragment>
);


class Agents extends Component {
    componentDidMount() {
        this.props.getAgents();
      };

render() {



    const TableWithSearch = () => {
        const { SearchBar } = Search;
        const { ExportCSVButton } = CSVExport;
        const {agents} = this.props.agent;


         return (

                <Card>
                <CardBody>
                    <h4 className="header-title mt-0 mb-1">Search and Export</h4>
                    <p className="sub-header">A Table allowing search and export the data in CSV format</p>
                    {agents.map(({ _id, name, phone, email, nid}) => (

                    <ToolkitProvider
                        bootstrap4
                        keyField="_id"
                        data={ _id, name, phone, email, nid}
                        columns={columns}
                        search
                        exportCSV={{ onlyExportFiltered: true, exportAll: false }}>
                        {props => (
                            <React.Fragment>
                                <Row>
                                    <Col>
                                        <SearchBar {...props.searchProps} />
                                    </Col>
                                    <Col className="text-right">
                                        <ExportCSVButton {...props.csvProps} className="btn btn-primary">
                                            Export CSV
                                        </ExportCSVButton>

                                    </Col>

                                </Row>

                                <BootstrapTable
                                    {...props.baseProps}
                                    bordered={false}
                                    defaultSorted={defaultSorted}
                                    pagination={paginationFactory({ sizePerPage: 5, sizePerPageRenderer: sizePerPageRenderer, sizePerPageList: [{ text: '5', value: 5, }, { text: '10', value: 10 }, { text: '25', value: 25 }, { text: 'All', value: records.length }] })}
                                    wrapperClasses="table-responsive"
                                />
                            </React.Fragment>
                        )}
                    </ToolkitProvider>
                    ))} 
                </CardBody>
            </Card>

    )
}



const Table = () => {
    return (
        <React.Fragment>
            <Row className="page-title">
                <Col md={12}>
                    <PageTitle
                        breadCrumbItems={[
                            { label: 'Agents List', path: '/Agents/Agents' ,active: true },

                        ]}
                        title={'Agents List'}
                    />
                </Col>
            </Row>


            <Row>
                <Col>
                    <TableWithSearch />
                </Col>
            </Row>


        </React.Fragment>
    )
}





Agents.propTypes = {
    getAgents: propTypes.func.isRequired,
    agent: propTypes.object.isRequired

  }

  const mapStateToProps = (state) => ({
    agent: state.agent
  });
}};

export default connect (
    mapStateToProps, 
     { getAgents, deleteAgent}
     )  (Agents);