получить из API, который я отправил запрос в ответную таблицу

Question

Мне понадобится таблица на стороне сервера, поэтому после того, как я увидел react-table получил 9k + star на github, а затем решил использовать ее, я пытаюсь создать React-таблицу, которая может выполнять опрос на удаленном сервере при каждом запросе данных в получить новейшие данные. поэтому в качестве примера я использую jsonplaceholder, который я запрашивал. Забавные данные c работают, получат отфильтрованные данные, отсортированные pageSize, pageIndex (https://jsonplaceholder.typicode.com/posts?_start={pageIndex will come here}&_limit={pageSize will come here} ... отсортированные и отфильтрованные данные). Как я могу это сделать? Спасибо.

ниже Я написал некоторый код, но не очень хорошо кодирующий извините за это

//Table.js
import React, { useState, useEffect } from 'react';
import { useTable, useFilters, useSortBy, usePagination } from 'react-table';

export default function Table({ columns, data, pages, onFetchData, loading, pageCount: controlledPageCount, error }) {
    const [ filterInput, setFilterInput ] = useState('');
    // Use the state and functions returned from useTable to build your UI
    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
        setFilter,
        page,
        canPreviousPage,
        canNextPage,
        pageOptions,
        pageCount,
        gotoPage,
        nextPage,
        previousPage,
        setPageSize,
        // Get the state from the instance
        state: { pageIndex, pageSize }
    } = useTable(
        //useTable is the primary hook used to build a React Table
        {
            columns,
            data,
            initialState: { pageIndex: 0 },
            manualPagination: true,
            pageCount: controlledPageCount
        },
        useFilters, //useFilters is the hook that implements row filtering
        useSortBy,
        usePagination
    );

    // Listen for changes in pagination and use the state to fetch our new data
    useEffect(
        () => {
            onFetchData({ pageIndex, pageSize });
        },
        [ onFetchData, pageIndex, pageSize ]
    );

    const handleFilterChange = (e) => {
        const value = e.target.value || undefined;
        setFilter('title', value);
        setFilterInput(value);
    };

    // Render the UI for your table
    return (
        <React.Fragment>
            <pre>
                <code>
                    {JSON.stringify(
                        {
                            pageIndex,
                            pageSize,
                            pageCount,
                            canNextPage,
                            canPreviousPage,
                            filterInput,
                            error,
                            //data,
                            onFetchData
                        },
                        null,
                        2
                    )}
                
            

{headerGroups.map ((headerGroup) => ( {headerGroup.headers.map ((column) => ( {column.render ('Header')} ))} ))} {page.map ((row, i) => {prepareRow (row); return ( {row.cells.map ((cell) => {return {Cell.render ( 'Ячейка')} ; })} ); })} {loading? (// Используйте наше пользовательское состояние загрузки, чтобы показать индикатор загрузки Загрузка ... ): ( Отображение результатов {page.length} ~ {ControlPageCount * pageSize} )} gotoPage (0)} disabled = {! canPreviousPage}> {'<<'} </button> {''} previousPage ()} disabled = {! canPreviousPage}> {'<'} </button> {''} nextPage ( )} disabled = {! canNextPage}> {'>'} {''} gotoPage (pageCount - 1)} disabled = {! canNextPage}> {'>>'} {''} Page {''} {pageIndex + 1} из {pageOptions.length} {''} | Go на страницу: {''} {const page = e.target.value? Число (e.target.value) - 1: 0; GotoPage (страницы); }} style = {{width: '100px'}} /> {''} {setPageSize (Number (e.target.value)); }}> {[10, 20, 30, 40, 50] .map ((pageSize) => ( Show {pageSize} ))} ); } //App.js import React, {useMemo, useState, useEffect} из'act '; импортировать таблицу из таблицы ./Table; import './App.css'; импорт _ из 'loda sh'; импорт топор ios из 'топор ios'; function App () {const columns = useMemo (() => [{Заголовок: «Информация», столбцы: [{Заголовок: «Ключ», метод доступа: «идентификатор»}, {Заголовок: «Заголовок», метод доступа: «Заголовок» '}, {Header:' Content ', accessor:' body '}]}], []); const [data, setData] = useState ([]); const [loading, setLoading] = useState (false); const [pageCount, setPageCount] = useState (0); const [ошибка, setError] = useState (null); useEffect (() => {(asyn c () => {const result = await ax ios ('https://jsonplaceholder.typicode.com/posts?_start=0&_limit=5'); setData (result.data);}) ();}, []) ; const requestData = (pageSize, pageIndex, отсортировано, отфильтровано) => {// Установить состояние загрузки setLoading (true); вернуть новое обещание ((разрешить, отклонить) => {const startRow = pageSize * pageIndex; axios .get (`https://jsonplaceholder.typicode.com/posts?_start= $ {startRow} & _ limit = $ {pageSize}`) .then ((response) => {let selectedData = response.data; if (Filter.length) {FilterData = Filter.reduce ((FilterSoFar, nextFilter) => {return FilterSoFar.filter ((строка) => {Return (row [nextFilter.id] + ''). includes (nextFilter.value);});}, FilterData);} const sortedData = _.orderBy (FilterData, Sorted.map ((sort) => {return (row) => {if (row [sort.id]) === null || row [sort.id] === undefined) {return -Infinity;} возвращаемый тип row [sort.id] === 'string'? row [sort.id] .toLowerCase (): row [sort.id];};}), sorted.map ((d) => (d.des c? 'des c': 'as c'))); const res = {row : sortedData, pages: Math.ceil (response.data.count / pageSize)}; // setSortedData (res.rows); setPageCount (res.pages); setTimeout (() => resolution (res), 500); setLoading (false);}) .catch ((error) => {// setError (error); console.log ('error', error);});}); }; const fetchData = (state, instance) => {setLoading (true); requestData (state.pageSize, state.page, state.sorted, state.filtered) .then ((res) => {setData (res.data); setPageCount (res.pages); setLoading (false);}) .catch ((err) => {setError (err); setLoading (false);}); }; возвращение ( loading = {loading} pageCount = {pageCount} error = {error} /> ); } экспорт приложения по умолчанию;