Question

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

如果在这样的提取调用的相同实现之后存在多个表，该怎么办？

有什么更好的方法？

我们将不胜感激

 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

func setParallaxMenu(){
        self.scrollView = MXScrollView()
        self.scrollView.backgroundColor  = UIColor.green
        self.scrollView.delegate = self
        self.scrollView.parallaxHeader.view = Parallax // You can set the parallax header view from a nib.
        self.scrollView.parallaxHeader.height = 446.0 // desired hieght or hight of the xib file
        self.scrollView.parallaxHeader.mode = MXParallaxHeaderMode.fill
        self.scrollView.parallaxHeader.minimumHeight = UIApplication.shared.statusBarFrame.size.height + (self.navigationController?.navigationBar.frame.height)!
        let newFrame = CGRect(x: 0,y: UIApplication.shared.statusBarFrame.size.height + (self.navigationController?.navigationBar.frame.height)!, width: self.view.frame.size.width, height: self.view.frame.size.height - (UIApplication.shared.statusBarFrame.size.height + (self.navigationController?.navigationBar.frame.height)!)) // scrollview's frame calculation
        scrollView.frame = newFrame
        scrollView.contentSize = newFrame.size
        self.scrollView.delegate = self
        view.addSubview(scrollView)
        self.pagemenuSetup()
    }


func pagemenuSetup()
    {
        controllerArray.removeAll()
        controllerArray.append(controller1)
        controllerArray.append(controller2)

        controller1.title = "ORANGE"
        controller2.title = "YELLOW"


        // Customize menu (Optional)
        let parameters: [CAPSPageMenuOption] = [
            .menuItemSeparatorWidth(4.3),
            .scrollMenuBackgroundColor(UIColor(red: 25.0/255.0, green: 26.0/255.0, blue: 36.0/255.0, alpha: 1.0)),
            .viewBackgroundColor(UIColor.clear),
            .selectionIndicatorColor(UIColor.white),
            .bottomMenuHairlineColor(UIColor.clear),
            .unselectedMenuItemLabelColor(UIColor(red: 255.0/255.0, green: 255.0/255.0, blue: 255.0/255.0, alpha: 0.5)),
            .menuItemFont(UIFont(name: "Helvetica", size: 16.0)!),
            .enableHorizontalBounce(false),
            .menuHeight(52.0),
            .menuMargin(0.0),
            .menuItemWidth(self.view.bounds.width/2),
            .selectionIndicatorHeight(15.0),
            .menuItemSeparatorPercentageHeight(0.1),
            .iconIndicator(true),
            .iconIndicatorView(self.getIndicatorView())
        ]
        // Initialize scroll menu
        var frame = view.frame
        scrollView.frame = frame
        scrollView.contentSize = frame.size
        let Height = self.view.frame.size.height - (UIApplication.shared.statusBarFrame.size.height + (self.navigationController?.navigationBar.frame.height)!)
        frame.size.height = Height
        self.pageMenu = CAPSPageMenu(viewControllers: controllerArray, frame: frame, pageMenuOptions: parameters)
        pageMenu!.delegate = self
        self.scrollView.addSubview(pageMenu!.view)
        view.addSubview(scrollView)
    }


private func getIndicatorView()->UIView
    {
        let imgView = UIImageView(frame: CGRect(x: 0, y: 0, width: self.view.bounds.width/2, height: 15.0))
        imgView.image = UIImage(named: "Indicator")
        imgView.contentMode = .scaleAspectFit
        return imgView
    }

使用setInterval为仪表板实现嵌套的访存API调用：fetch（）+ React + Typesctipt

1 个答案: