Основная проблема Реагировать с экспресс-динамической таблицей

Question

Я создаю свое первое приложение crud с реагированием и экспрессом, но я не могу создать динамическую таблицу, которую я получаю от sql cosulta.

Ошибка: props.datos.map не является функцией.

Я не знаю, правильно ли я это делаю или, возможно, я использую плохие методы.

Я видел, и это может быть потому, что вызов асинхронный и из-за этого.

Я должен изменить состояние компонента и не доставлять данные для реквизита.

Экспресс 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));
  });




});

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)

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

Answer 1

Просто немного измените переменную 'lines', и рекомендуется помещать асинхронные запросы в Методы жизненного цикла компонента.Я думаю, что это будет работать.

fetch('/express')
  .then(function(response) {
   response.josn()
})
.then(function(myJson) {
  rows=[...myJson];
});

Answer 2

У вас ошибка, потому что rows переменная не является массивом.Это обещание.
Вы должны назначить его по-другому:

let rows = [];

const loadingPromise = fetch('/express')
  .then(response => response.json())
  .then(json => {
     rows = json
  })

И лучший способ управлять асинхронными данными - это использовать методы жизненного цикла React.Component.Таким образом вы можете гарантировать, что переменная rows будет определена в методе render, а компонент будет автоматически перерисован, когда вы получите ответ от сервера.

class App extends React.Component {
  state = {
    rows: []
  }
  
  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(r => r.json())
      .then(users => {
        this.setState({rows: users});
      })
  }
  
  render () {
    const {rows} = this.state;
    
    return (
      <div>
        {rows.length === 0 && "Loading..."}
        
        <ul>
          {rows.map((row, index) => (
            <li key={index}>{row.name}</li>
          ))}
        </ul>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>