試圖通過Axios從獲取請求打印數據

Question

我試圖從使用axios的獲取請求打印SQL數據。我使用快速服務器端，我的前端是React。在我的反應組件中，我有一個具有axios GET調用的函數，然後在渲染中調用該函數。我可以把數據弄好。我的問題實際上是將數據打印到表格中。這是我到目前爲止的代碼：

getTableData(){ 
     axios.get("/api") 
     .then(function (response){ 
     return(
      Object.keys(response).map((row, index) => (
       <TableRow key={index} selected="false"> 
       <TableRowColumn>Test</TableRowColumn> 
       <TableRowColumn>Test</TableRowColumn> 
       </TableRow> 
     )) 
     ) 
     }) 
     .catch(function (error){ 
      console.log(error); 
     }) 
    } 

這是我用做API調用，以及嘗試打印該表的功能。我把它作爲{this.getTabledata（）}在渲染函數中調用。

這裏是我的server.js中的GET請求：

app.get('/api', function (req, res){ 
    sql.connect(config, err =>{ 
     new sql.Request().query('select * from Counselling', (err, result) =>{ 
      var table = new Object(); 
      result["recordset"].map((row, index) => (
       table[row["StudentName"]] = row["StudentNumber"] 
      )); 
      res.send(table); 
      sql.close(); 
     }); 
    }); 

有我丟失的東西？我是否必須爲行使用特定的映射函數？

Answer 1

首先不要直接從render方法制作api call方法，請在componentDidMount生命週期方法中或在任何特定event上執行此操作。將響應存儲在state變量中，因爲api調用將是異步調用，它不會return這個ui元素。

使用此功能可以從服務器獲取數據：

componentDidMount(){ 
    axios.get("/api") 
     .then((response) => { 
      this.setState({response: response}) 
     }) 
     .catch((error) => { 
      console.log(error); 
     }) 
} 

使用此方法，它將return錶行一旦你從服務器的響應，因爲當我們再次做setState，React render組件。

getTableData(){ 

    if(!this.state.response) return null; //added this line 

    return Object.keys(this.state.response).map((row, index) => (
     <TableRow key={index} selected="false"> 
      <TableRowColumn>Test</TableRowColumn> 
      <TableRowColumn>Test</TableRowColumn> 
     </TableRow> 
    ))  
}