javascript - 无法使用 Redux 在 DataTable 上呈现数据
问题描述
我是新来的反应,
我收到这个错误。
我想使用 BootstrapTablem 将 API 数据呈现到 Datatable,我还在其中使用了 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);
解决方案
推荐阅读
- php - 使用 PDO 处理 PHP 中的 MySQL 错误 1104
- java - Java 从隐藏在用户点击后面的网站中抓取数据?
- python - 从一个接收数据列表的函数创建多个 matplotlib 图表
- hadoop - hadoop reducer 不考虑两个相等的自定义可写对象相等
- javascript - 在蓝牙管理器组件侦听器函数中发出处理异步函数
- python - SQLite 在插入查询中使用变量
- rest - 如何发送文件作为响应
- java - 错误 - 在索引 0 *1 附近悬空元字符“*”
- batch-file - 有没有办法通过 bat 脚本设置 Perforce 工作区的视图?
- python - Python 在线程类函数中广播更新的 Web-socket 数据