2

我有一张显示诊所的表格。我还有一个处理 pageIndex 的 onPageChange 道具，然后我根据该页面获取数据。下面是我的表配置

import 'react-table/react-table.css'
import React, { Component } from 'react';
import ClinicFormComponent from './newClinicForm';
import SearchFormComponent from '../search/searchForm';
import { connect } from 'react-redux';
import { fetchClinics, fetchClinic, deleteClinic, searchClinics, pushBreadcrumb, popBreadcrumb } from '../../actions/index.js';
import { toast } from 'react-toastify';
import ReactTable from 'react-table'
import store from '../../helpers/store';
import { ic_search } from 'react-icons-kit/md/ic_search';
import SvgIcon from 'react-icons-kit';
require('normalize.css/normalize.css');
// require('styles/App.css');

class ClinicsPage extends Component {

  constructor() {
    super();

    this.handleClickForm = this.handleClickForm.bind(this);
    this.handleClickFormSearch = this.handleClickFormSearch.bind(this);
    this.closeForm = this.closeForm.bind(this);
    this.onPageChange = this.onPageChange.bind(this);
  }

  componentDidMount(){
    this.props.searchClinics({ country: 'Australia' });
  }

  onPageChange(pageIndex) {
      this.props.fetchClinics(pageIndex, null);
  }

  render() {
    let { devs } = this.props;

    const columns = [{
        Header: 'Id',
        accessor: 'id' // String-based value accessors!
      }, {
        Header: 'Name',
        accessor: 'name'
      }, {
        Header: 'Description', // Required because our accessor is not a string
        accessor: 'description',
        sortable: true
        // accessor: d => d.friend.name // Custom value accessors!
      },
      {
        Header: 'Country', // Required because our accessor is not a string
        accessor: 'country',
        sortable: true
        // accessor: d => d.friend.name // Custom value accessors!
      },
      {
        Header: 'Area', // Required because our accessor is not a string
        accessor: 'area',
        sortable: true
        // accessor: d => d.friend.name // Custom value accessors!
      },
      {
        Header: 'Latitude', // Required because our accessor is not a string
        accessor: 'latitude',
        sortable: true
        // accessor: d => d.friend.name // Custom value accessors!
      },
      {
        Header: 'Longitude', // Required because our accessor is not a string
        accessor: 'longitude',
        sortable: true
        // accessor: d => d.friend.name // Custom value accessors!
      },
      {
        Header: 'Tags', // Required because our accessor is not a string
        accessor: 'tags',
        sortable: true,
        Cell: (row) => {if (row.original.tags.length>1) { return row.original.tags.join(', ') } else { return row.original.tags } }
      },
      {
        Header: () => <span className="text-center">Actions</span>,
        accessor: 'id',
        id: 'actions',
        sortable: true,
        Cell: (row) => (<span><button className="text-center btn btn-primary-zoetis margin_right_5" onClick={()=>{this.props.history.push('/editClinic/'+ row.original.id)}}>Edit</button ><button className="text-center btn btn-danger" onClick={()=>{this.props.deleteClinic(row.original.id, row.original)}}>Delete</button ></span>)
      }
    ]

    return (
      <div className="wrap">
          <div className="row margin_top_10 margin_bottom_5">
              <div className="col-sm-6">
                  <a className="btn btn-link color_zoetis btn_zoetis_alt" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapseExample2" onClick={this.handleClickForm}>NEW CLINIC</a>
              </div>
              <div className="col-sm-6">
                  <a className="nav-link float_right search-clinic-btn" data-toggle="collapse" onClick={this.handleClickFormSearch} role="button" aria-expanded="false" aria-controls="collapseExample"><span className="search_label">Search data entries...</span> <SvgIcon size={25} icon={ic_search}/></a>
              </div>
          </div>
          <div id="nav-tabContent">
            <ReactTable
              data={devs.clinics}
              pageSizeOptions= {[10]}
              defaultPageSize= {10}
              columns={columns}
              pages={devs.paginationData.totalPages || ''}
              sortable={true}
              multiSort={true}
              //manual
              filterable
              page={devs.paginationData.pageNumber}
              loading={devs.isFetching}
              onPageChange={this.onPageChange}
              noDataText='No Data Found'
              className='-striped -highlight'
              />
          </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    devs: state.reducer.devs,
    showMenu: state.reducer.devs.showMenu,
    showEditMenu: state.reducer.devs.showEditMenu,
    paginationData: state.reducer.devs.paginationData,
    location: state.router.location.pathname
  }
}

export const mapDispatchToProps = {
  fetchClinics,
  searchClinics,
  fetchClinic,
  deleteClinic,
  pushBreadcrumb,
  popBreadcrumb
}

export default connect(mapStateToProps, mapDispatchToProps)(ClinicsPage);

请注意，我已禁用手动道具。如果我启用手动道具，那么我可以浏览下一页和上一页，但我无法对数据进行排序或过滤。

在禁用手动道具的情况下，过滤和排序工作正常，但是当我在下一页导航时，表格显示为空。第一页显示正确的前 10 个数据。我也测试了 api 并返回正确的下 10 个数据。

有什么解决方法吗？保持服务器端分页和默认排序和过滤？

4

1 回答 1

4

测试分解手动属性

    <ReactTable
      filtered={this.state.filtered}
      onFilteredChange={this.onFilteredChange.bind(this)}
      defaultFilterMethod={(filter, row) =>
        String(row[filter.id]) === filter.value
      }
      columns={columns}
      ref={r => (this.selectTable = r)}
      className="-striped -highlight"
      defaultPageSize={10}
      data={this.state.data}
      pages={this.state.pages}
      loading={this.state.loading}
      manual <-------
      resizable={true}
      filterable
      filterAll={true}
      onFetchData={(state, instance) => {
        this.setState({loading: true})
        axios.get(`${API}${controller}`, {
          params: {
            pages: state.page,
            pageSize: state.pageSize,
            filtered: state.filtered,
            typeOption: `${type}`,
            dateinit: `${this.state.dateinit}`,
            datefinal: `${this.state.datefinal}`,
            data: this.props.data
          },
          headers: { 'Authorization': `${tokenCopyPaste()}` }
        })
          .then((res) => {
            this.props.exportTable(res.data, type);
            this.setState({
              data: res.data.data,
              fulldata: res.data,
              pages: Math.ceil(res.data.pages / state.pageSize),
              loading: false
            })
          })
      }
      }
    />
于 2018-11-16T21:47:50.827 回答