Stack Overflow en español Asked by Javier Richards on January 24, 2021
Soy nuevo en react y estoy creando mi primera aplicación crud con Mysql/react/express js.
Mi problema es que no puedo renderizar el cuerpo de la tabla debido a que los datos que estoy recibiendo al parecer no los estoy almacenando bien.
Los datos los obtengo de una consulta sql, y creo el cuerpo de la tabla mediante la función map, el error que obtengo es que map no es una función.
Muchas gracias por adelantado
Table.js
function SimpleTable(props) {
return (
<Paper className={props.root}>
<Table className={props.table}>
<TableHead>
<TableRow>
<TableCell>Familia</TableCell>
<TableCell numeric>Genero</TableCell>
<TableCell numeric>Especie </TableCell>
<TableCell numeric>Calidad </TableCell>
<TableCell numeric>Tamaño </TableCell>
<TableCell numeric>Pais </TableCell>
<TableCell numeric>Comentario </TableCell>
<TableCell numeric>Precio </TableCell>
</TableRow>
</TableHead>
<TableBody>
{props.datos.map(molusco => {
return (
<TableRow >
<TableCell component="th" scope="row">
{molusco.familia}
</TableCell>
<TableCell numeric>{molusco.genero}</TableCell>
<TableCell numeric>{molusco.especie}</TableCell>
<TableCell numeric>{molusco.calidad}</TableCell>
<TableCell numeric>{molusco.tamaño}</TableCell>
<TableCell numeric>{molusco.pais}</TableCell>
<TableCell numeric>{molusco.comentario}</TableCell>
<TableCell numeric>{molusco.precio}</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</Paper>
);
}
SimpleTable.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(SimpleTable);
App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import SideBar from './sideBar'
import Table from './table'
class App extends Component {
render() {
return (
<SideBar>
<Table datos={rows}/>
</SideBar>
);
}
}
export default App;
var rows= fetch('/express')
.then(function(response) {
console.log(response)
return response;
})
.then(function(myJson) {
console.log(myJson);
});
console.debug(rows)
console.log(rows)
Server.js
const express = require('express');
const app = express();
var mysql = require('mysql');
const port = process.env.PORT || 5000;
var connection = mysql.createConnection({
host : 'localhost',
user : 'root',
password : '',
database : 'shells'
});
connection.connect();
// console.log that your server is up and running
app.listen(port, () => console.log(`Listening on port ${port}`));
// create a GET route
app.get('/express', (req, res) => {
// res.send({ saludo: 'YOUR EXPRESS BACKEND IS CONNECTED TO REACT' });
connection.query('select * from shell', function(err, rows, fields) {
res.send(JSON.stringify(rows));
});
});
El problema es que estás haciendo el fetch
fuera de el componente React por eso no lo registra, tampoco estás convirtiendo la respuesta a json, por esas dos razones al momento del render tu variable rows
es undefined
o tal vez es una promesa pendiente.
La solución que te propongo es utilizar el lifecycle componentDidMount
que se ejecuta una vez montados los componentes en el DOM.
// App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import SideBar from './sideBar'
import Table from './table'
class App extends Component {
// Agregamos este código
constructor(props) {
super(props);
this.state = {
rows: [] // Lo declaramos como un array para que al momento del render no vaya a dar problemas de undefined o que map no es una función
}
}
componentDidMount() {
fetch('/express')
.then(function(response) {
console.log(response)
return response.json(); // Utilizamos la función json para poder consumir los datos.
})
.then(function(myJson) {
console.log(myJson);
this.setState({ rows: myJson });
});
}
render() {
const { rows } = this.state; // Declaramos la variable rows
return (
<SideBar>
<Table datos={rows}/>
</SideBar>
);
}
}
export default App;
Answered by Martiuh on January 24, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP