リアクションjsでAjaxコール自動リフレッシュを作成する方法

Question

このページを自動更新する必要があります。バックエンドへのajaxコールを好きなように設定する方法は？私が思っているのは、ajaxで間隔を設定して、自動的に3分ごとに呼び出すようにしますか？これを実装する方法はありますか？ これを実装するためのより良いソリューションがありますか？

export default class InventoryLevelReport extends React.Component { 
    constructor() { 
    super(); 

    this.state = { 
     data: [ 
     { 
      sku: null, 
      inventoryCount: 0 
     } 
     ], 
     url: '/mft/api/reports/inventory-view' 
    }; 
    } 

    sortByCount() { 
    this.setState({data: _.orderBy(this.state.data, (i) => i.inventoryCount)}); 
    } 

    componentDidMount() { 
    ajax(this.state.url, { 
     success: data => { 
     console.log(data); 
     this.setState({data: data.data}); 
     } 
    }); 
    } 

    render() { 
    const buttonStyle = { 
     position: 'relative', 
     float: 'right' 
    }; 
    return <div className="content"> 
     <Button style={buttonStyle} onClick={() => this.sortByCount()}>Sort</Button> 
     <div> 
     <Table tableType='bordered'> 
      <th>SKU</th> 
      <th>Count</th> 
      <tbody> 
      {this.state.data.map((data, i) => <InventoryTableRow data={data} key={i} />)} 
      </tbody> 
     </Table> 
     </div> 
    </div>; 
    } 
} 

class InventoryTableRow extends React.Component { 

    render() { 
    return (
     <TableRow> 
     <TableColumn>{JSON.stringify(this.props.data.sku).split('"').join('')}</TableColumn> 
     <TableColumn>{JSON.stringify(this.props.data.inventoryCount)}</TableColumn> 
     </TableRow> 
    ); 
    } 
} 

Answer 1

あなたは、複雑な相互作用を処理するためにsetInterval

constructor() { 
    super(); 

    // ... existing constructor code 

    this.loadData = this.loadData.bind(this) 
} 

loadData() { 
    ajax(this.state.url, { 
    success: data => { 
     console.log(data); 
     this.setState({data: data.data}); 
    } 
    } 
} 

componentDidMount() { 
    this.loadData() 
    setInterval(this.loadData), 180000); // 3 minutes in milliseconds 
}