react 地区筛选_reacttable不在表中呈现服务器端数据（通过手动分页、筛选和排序）...

从后端(PythonAPI)手动获取要显示在react表中的数据时遇到问题。我已经阅读了文档并尝试使用这里的示例：https://react-table.js.org/#/story/server-side-data

我只看到一列中的数据，只有6条记录，这真的很奇怪。这可能是我将async/await语法与使用promise的示例代码混合的方式。我能够用相同的async/await语法创建一个简单的react表来获取数据，但是当我从示例中添加服务器端数据代码(requestData函数)时，它就不能工作了。在

我花了好几天时间在这上面，到处找Stackoverflow和互联网。我是新手，所以请对我放轻松点。以下是我所拥有的：import React from 'react'

import { render } from 'react-dom'

import ReactTable from 'react-table'

import api from 'src/api'

import { orderBy } from 'lodash'

// importing react-table css would not work so I added it using cdn link

const requestData = async (pageSize, page, sorted, filtered) => {

// api is a wrapper for axios.create()

const rawData = await api.admin.exercise.feed()

return new Promise((resolve, reject) => {

let filteredData = rawData;

if (filtered.length) {

filteredData = filtered.reduce((filteredSoFar, nextFilter) => {

return filteredSoFar.filter(row => {

return (row[nextFilter.id] + "").includes(nextFilter.value);

});

}, filteredData);

}

const sortedData = orderBy(

filteredData,

sorted.map(sort => {

return row => {

if (row[sort.id] === null || row[sort.id] === undefined) {

return -Infinity;

}

return typeof row[sort.id] === "string"

? row[sort.id].toLowerCase()

: row[sort.id];

};

}),

sorted.map(d => (d.desc ? "desc" : "asc"))

);

const res = {

rows: sortedData.slice(pageSize * page, pageSize * page + pageSize),

pages: Math.ceil(filteredData.length / pageSize)

};

resolve(res);

});

};

export class ExerciseList extends React.Component {

constructor() {

super();

this.state = {

data: [],

pages: null,

loading: true

};

this.fetchData = this.fetchData.bind(this);

}

setLoading(loading) {

this.setState({ loading })

}

fetchData(state, instance) {

this.setLoading(true);

requestData(

state.pageSize,

state.page,

state.sorted,

state.filtered

).then(res => {

this.setState({

data: res.rows,

pages: res.pages,

loading: false

});

});

}

render() {

const { data, pages, loading } = this.state;

return (

columns={[

{

Header: "Name",

accessor: "name"

},

{

Header: "Movement",

accessor: "movement"

},

{

Header: "Equipment",

accessor: "equipments"

},

{

Header: "Channel",

accessor: "channel"

},

{

Header: "Level",

accessor: "skill_level"

},

{

Header: "Duration",

accessor: "duration",

filterable: false

},

{

Header: "Injuries",

accessor: "injuries"

},

{

Header: "Is Substitute",

accessor: "has_video",

Cell: ({ value }) => (value? 'Yes': 'No'),

filterable: false

}

]}

data={data}

pages={pages}

loading={loading}

onFetchData={this.fetchData}

manual

filterable

defaultPageSize={10}

className="-striped -highlight"

/>

);

}

}

render(, document.getElementById('datatable'));