0

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




});

1 respuesta 1

1

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;

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.