试图通过Axios从获取请求打印数据

我试图从使用axios的获取请求打印SQL数据。我使用快速服务器端，我的前端是React。在我的反应组件中，我有一个具有axios GET调用的函数，然后在渲染中调用该函数。我可以把数据弄好。我的问题实际上是将数据打印到表格中。这是我到目前为止的代码：试图通过Axios从获取请求打印数据

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(); 
     }); 
    });

有我丢失的东西？我是否必须为行使用特定的映射函数？

来源

2017-04-06 Andy Wong

如果您每次进行重新渲染时都从渲染中调用它，则会进行数据库调用。如果您的组件经常更改，则代价可能很高。 – Dez

首先不要直接从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> 
    ))  
}

来源

2017-04-06 15:24:31

嘿，当我getInitialState，我应该设置响应状态变量？现在，我把它作为响应：null，但是这会产生一个错误，从而停止渲染过程。 –

检查更新后的答案，在'getInitialState'中将'response'的'value'设置为'null'，并将检查放在'getTableData'方法中。 –

嘿，忘了回复，但这解决了我的问题。非常感谢你！ –

试图通过Axios从获取请求打印数据

回答

相关问题