尝试通过 Axios 从 Get 请求中打印数据

Question

我正在尝试使用 axios 从获取请求中打印 SQL 数据。我正在使用 express 服务器端，我的前端是 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>
    ))     
}