如何在反应网络应用程序中获取和表示由python生成的数据

如何在反应网络应用程序中获取和表示由python生成的数据

问题描述:

我目前正在开发一个小型项目来构建一个Web应用程序,以便可视化我已完成的一些Python脚本生成的一些本地数据以及前端数据可视化被写入反应。我有点困惑,我怎么能获取数据来代表我的网络应用程序。我看到了一些使用fetch()而不是jQuery的建议。但是我所做的一切都是在本地托管的,那么我如何向React发出Python脚本的请求,以及如何从Python中的fetch()请求中检索params?谢谢!如何在反应网络应用程序中获取和表示由python生成的数据

import React, { Component } from 'react'; 
 
import logo from './logo.svg'; 
 
import './App.css'; 
 
import RadarChart from './components/RadarChart'; 
 
import LineChart from './components/LineChart'; 
 

 
class App extends Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { 
 
     bioData: {}, 
 
     appData: {} 
 
    } 
 
    } 
 

 
    componentWillMount() { 
 
    this.getChartData(); 
 
    } 
 
    
 
    static lastSyncTime = "2017-06-28"; 
 
    getChartData() { 
 
    // TODO: AJAX calls/fetch() request here to retrieve data as well as pass a param: lastTimeSync to Python scripts 
 
    this.setState({ 
 
     
 
    }); 
 
    } 
 

 
    
 
    
 

 
    render() { 
 
    return (
 
     <div className="App"> 
 
     <div className="App-header"> 
 
      <img src={logo} className="App-logo" alt="logo" /> 
 
      <h2>Daily Report</h2> 
 
     </div> 
 
     <LineChart chartData={this.state.bioData} /> 
 
     <br/> 
 
     <button onClick = {this.handleRefreshLine}>Refresh</button> 
 
     <br/> 
 
     <RadarChart chartData={this.state.appData} /> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
export default App;

+1

你需要在你的Python后端公开的API。您需要创建一个接受参数并返回数据的端点。如果使用fetch(或axios),那么您将使用来自后端的响应更新您的状态。尽管提供了特定的代码示例,但问题太广泛了。 –

+0

@ChaseDeAnda thx男子。我只是在寻找一个方向,而不是完全的代码。我会尝试你的建议! –

像这样的东西可以帮助你:

getChartData() { 
    $.getJSON("https://yourserver.com/your/python/api", { lastTimeSync: App.lastSyncTime }).then(results => { 
    this.setState({ appData: results.appData, bioData: results.bioData }) 
    }) 
}