使用 setInterval 为仪表板实现嵌套的 fetch API 调用：fetch()+React+Typescript

Question

我正在尝试调出带有反应表的仪表板页面。我希望每 2 秒刷新一次表。此外，我有两个 fetch api 调用，其中第一个的结果作为参数传递给第二个。此外，第二次 fetch 调用必须每两秒设置一次图表数据。

此外，如果有多个表遵循此类 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
            />
        )
    }
}