TransWikia.com

Problema con tabla dinamica en react

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




});

One Answer

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

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP