Axios를 통해 Get 요청에서 데이터를 인쇄하려고합니다.

Question

Axios를 사용하여 get 요청에서 SQL 데이터를 인쇄하려고합니다. 나는 익스프레스 서버 측을 사용 중이며 프런트 엔드는 React입니다. 내 반응 요소 내에서 Axis 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()}와 같이 호출합니다.

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

내가 부족 뭔가가 있나요 :

여기에 내 server.js 내에서 GET 요청입니까? 행에 대해 특정 매핑 함수를 사용해야합니까? 모든

Answer 1

첫째는 api call 직접 render에서 방법을하지 않는, 할 그 중 하나 componentDidMount 수명주기 방법 또는 특정 event합니다. 응답을 state 변수에 저장하면 API 호출은 비동기 호출이되므로 return 요소가 없습니다.

사용이 서버에서 데이터를 가져올 : 당신은 서버에서 응답을하면

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