Question

我在反应和表达方面有基本的应用。我试图做的是一个只有一个表的表，为此，我添加了MUI-dataTable，除了应用程序太慢之外，其他所有东西都运行良好。当我单击过滤器或搜索时，它变得非常慢，并且我不明白为什么。我附上我的代码

反应应用程序：

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 {
  state = {
    rows: []
  }

  componentDidMount() {

    fetch("/express")
      .then(r => r.json())
      .then(users => {
        this.setState({rows: users});
      })
  }

  render() {
    return (
      // <SideBar> 
        <Table datos={rows}/> 
      // </SideBar> 



    );
  }
}

export default App;

let rows = [];

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

Express应用

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(rows);
    console.log(rows)
  });




});

表React组件

import React from 'react';
import PropTypes from 'prop-types';
import MUIDataTable from "mui-datatables";


const styles = theme => ({
  root: {
    width: '100%',
    marginTop: theme.spacing.unit * 3,
    overflowX: 'auto',
  },
  table: {
    minWidth: 700,
  },
});

const columns = ["Familia", "Genero", "Especie", "Calidad","Tamaño","País","Comentario","Precio","habitad"];



function SimpleTable(props) {
  var arr = props.datos.map(dato=>Object.values(dato))
  console.log(arr)
  return (


    <MUIDataTable
      title={"Employee List"}
      data={arr}
      columns={columns}
    />
  );
}

SimpleTable.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default (SimpleTable);

React中的渲染表很慢

0 个答案: