Estoy tratando de imprimir datos SQL de una solicitud de obtención usando axios. Estoy usando el lado del servidor express, y mi interfaz es React. Dentro de mi componente de reacción, tengo una función que tiene la llamada GET de axios, y luego llamo a dicha función dentro del render. Puedo obtener bien los datos. Mi problema es en realidad imprimir los datos en la tabla. Aquí está mi código hasta ahora:
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); }) }Esta es la función que uso para hacer la llamada a la API, así como para intentar imprimir la tabla. Lo llamo dentro de la función de representación como {this.getTabledata()}.
Aquí está la solicitud de obtención dentro de mi server.js:
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(); }); });¿Se me escapa algo? ¿Tengo que usar una función de mapeo específica para las filas?
En primer lugar, no haga la api call directamente desde el método de render , hágalo en el método de ciclo de vida del componentDidMount o en cualquier event específico. Almacene la respuesta en la variable de state porque la llamada api será una llamada asíncrona, no return los elementos ui.
Use esto para obtener los datos del servidor:
componentDidMount(){ axios.get("/api") .then( (response) => { this.setState({response: response}) }) .catch( (error) => { console.log(error); }) } Use este método, return las filas de la tabla una vez que obtenga la respuesta del servidor, porque cuando hacemos setState , React render el componente.
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> )) }