Как сделать опрос на реактивном столе - PullRequest
Новая
       9

Как сделать опрос на реактивном столе

0 голосов
/ 06 июня 2018

Я пытаюсь создать React-Table, которая может каждую секунду опрашивать удаленный сервер для получения новейших данных.Я просто следовал тому, что автор делал в документе (https://react -table.js.org / # / story / server-side-data ), и пытался интегрировать функцию опроса (setInterval) в "componentDidMount"но он НЕ УДАЛЕН.

Сообщение об ошибке показывает, что при запуске «requestData» в «componentDidMount», «отфильтрованный» не определен, длина которого недоступна.Как я могу это исправить?Спасибо. 

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;

1 Ответ

0 голосов
/ 07 июня 2018

Прежде всего, вам необходимо понять, что такое обратный вызов onFetchData.Взято из документов, onFetchData это:

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

Так что то, что вы пытаетесь достичь здесь, не будет работать так, как пытались.Видя, что выборка данных с удаленного сервера каждую секунду не является одним из условий, вызывающих обратный вызов onFetchData, вам следует попробовать другой подход.

Я разобрал React-Table пример Simple Table и добавил запросы данных по времени здесь , это должно помочь вам начать работу.

...