Реализация вложенных вызовов API извлечения с помощью setInterval для панели мониторинга: fetch () + React + Typesctipt

Question

Я пытаюсь открыть страницу панели инструментов с таблицей реагирования.Я хочу, чтобы таблица обновлялась каждые 2 секунды. Также у меня есть два вызова API fetch, где результат первого передается как параметр второму.Кроме того, второй вызов извлечения должен устанавливать данные диаграммы каждые две секунды.

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

Что такоелучший способ сделать это?

Помощь будет оценена

 import * as React from 'react';
 import ReactTable from 'react-table';
 import 'react-table/react-table.css';

 interface IState {
    data: any[];
 }

 export default class Dashboard extends React.Component<{},IState> {

   constructor(props: any) {
     super(props);
     this.state = {
       data: [],
   }

   componentDidMount()
   { 
       const url="/api/query/fetch";    

        var result = fetch(url, {
            method: 'post',
            body : JSON.stringify({"id":"abc"),
            headers: {
                     'Content-Type': 'application/json'
                    },
           }).then(function(response) {
        return response.json();

       }).then(function(data) {

        return fetch('api/query/fetch' + data.id); // want this call to be under setInterval such that chart data refreshes every 2 seconds, s uch that table data refreshes every 2 seconds
      })
      .then(function(response) {
           return response.json();
      })
      .catch(function(error) {
          console.log('Request failed', error)
      })
    result.then(function(r) {
         this.setState({data:r});
    });
  }     

  render(){
     return(
        <ReactTable 
           data={this.state.data} 
           columns={columns} //column config object
         />
     )   
  }
}

Answer 1

import * as React from 'react';
import ReactTable from 'react-table';
import 'react-table/react-table.css';

interface IState {
    data: any[];
    id: any;
}

export default class Dashboard extends React.Component<{}, IState> {

    constructor(props: any) {
        super(props);
        this.state = {
            data: [],
            id: null
        }
    }

    componentDidMount() {
        const url = "/api/query/fetch";

        fetch(
            url, 
            {
                method: 'post',
                body: JSON.stringify({ "id": "abc"}),
                headers: {
                    'Content-Type': 'application/json'
                }
            }
        ).then(function (response) {
            return response.json();
        }).then(function (data) {
            this.setState({
                id: data.id
            }, () => this.fetchData())
        });
    }

    fetchData() {
        fetch('api/query/fetch' + this.state.id)
        .then(function (response) {
            return response.json();
        })
        .then(function (r) {
            this.setState({ data: r });
            setTimeout(() => {
                this.fetchData();
            }, 2000);
        })
        .catch(function (error) {
            console.log('Request failed', error)
        })
    }

    render(){
        return (
            <ReactTable
                data={this.state.data}
                columns={columns} //column config object
            />
        )
    }
}