基本问题 React with express dynamic table

Question

我正在使用 react 和 express 创建我的第一个 crud 应用程序，但我无法创建从 sql cosulta 接收的动态表。

错误是：props.datos.map 不是函数。

我不知道我做的是否正确，或者我使用了不好的做法。

我看到了，可能是因为调用是异步的，因此。

我必须更改组件的状态，而不是为 props 传递数据。

表达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

只需稍微更改“行”变量，将异步请求放在组件生命周期方法中是一个好习惯。我认为它会起作用。

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>