1

我正在尝试构建一个 React-Table，它可以每秒轮询远程服务器以获取最新数据。我只是按照作者在文档中所做的（https://react-table.js.org/#/story/server-side-data）并尝试将轮询功能（setInterval）集成到“componentDidMount”中，但它失败了。

错误信息显示在“componentDidMount”下运行“requestData”时，“filtered”未定义，其长度不可访问。我该如何解决？谢谢你。

import React from 'react';
import _ from 'lodash'

import ReactTable from "react-table";
import 'react-table/react-table.css'


const requestData = (pageSize, page, sorted, filtered) => {
    return fetch(
        'http://127.0.0.1:5000/agent',
        { method: 'GET'}
    ).then( res => res.json()
    ).then( filteredData => {

        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)
        };

        return res;
    });
};


class AgentTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            pages: null,
//            loading: true,
        };
        this.fetchData = this.fetchData.bind(this);
    }

    fetchData(state, instance) {
//        this.setState({
//            loading: true
//        });
        requestData(
            state.pageSize,
            state.page,
            state.sorted,
            state.filtered
        ).then(res => {
            this.setState({
                data: res.rows,
                pages: res.pages,
//                loading: false,
            })
        })
    }

    componentDidMount() {
        setInterval(
            () => requestData(
                this.state.pageSize,
                this.state.page,
                this.state.sorted,
                this.state.filtered
            ).then(res => {
                this.setState({
                    data: res.rows,
                    pages: res.pages,
//                    loading: false,
                })
            }), 5000
        );
    }

    render() {
        const { data, pages, loading } = this.state;
        return (
            <div>
                <ReactTable
                    columns={[
                        {
                            Header: "Agent ID",
                            accessor: "AGENTID"
                        },
                        {
                            Header: "Description",
                            accessor: "DESCRIPTION"
                        },
                        {
                            Header: "Domain",
                            accessor: "DOMAIN"
                        },
                        {
                            Header: "Register Time",
                            accessor: "REGTIME"
                        },
                        {
                            Header: "Status",
                            accessor: "STATUS"
                        },
                    ]}
                    manual // Forces table not to paginate or sort automatically, so we can handle it server-side
                    data={data}
                    pages={pages} // Display the total number of pages
                    loading={loading} // Display the loading overlay when we need it
                    onFetchData={this.fetchData} // Request new data when things change
                    filterable
                    defaultPageSize={20}
                    className="-striped -highlight"
                />
            </div>
        );
    }
}

export default AgentTable;

4

1 回答 1

0

首先，您需要了解onFetchData回调是什么。取自文档，onFetchData是：

This function is called at componentDidMount and any time sorting, pagination or filterting is changed in the table

因此，您在这里尝试实现的目标不会像尝试的那样起作用。看到每秒从远程服务器获取数据不是调用onFetchData回调的条件之一，您应该尝试不同的方法。

我 forkReact-Table的示例并在此处Simple Table添加了定时数据请求，这应该可以帮助您入门。

于 2018-06-07T11:44:01.057 回答