反应表：服务器端处理数据

Question

我有一个简单的Express / MySQL / React项目，我的后端存储在基本文件中的一个后端文件夹中，在后端文件夹中，我在一个前端文件夹中创建了我的React前端，在后面设置了mysql仅当我在后端的查询中添加LIMIT 1000时，前端和结果才在前端输出。

我遇到的问题是，我需要对数据表使用服务器端处理，以便可以在前端看到所有记录。我看过一些教程，而且都有些令人困惑或无法很好地解释。

注意我正在使用ReactTable。

带有MySQL的Express

var express = require('express');
var router = express.Router();
let cors = require('cors');
let mysql = require('mysql');

let host = 'localhost';
let user = 'root';
let pass = '';
let db = 'agents';
let tbl = 'agentinfo';

let SELECT_QUERY = 'SELECT ' +
  'AgentID, ' +
  'FirstName AS `First Name`, ' +
  'LastName AS `Last Name`, ' +
  'IF(' +
    'Phone IN (NULL, "", " "), ' +
    '"",' +
    'concat("(", right(Phone,3), ") ", mid(Phone,4,3), "-", right(Phone,4))' +
  ') AS Phone ' +
  'FROM ' + tbl + ' LIMIT 10000;';

let connection = mysql.createConnection({
  host: host,
  user: user,
  password: pass,
  database: db,
  dateStrings: true
});
connection.connect(err => {
  if (err) {
    return err;
  }
});

router.use(cors());

router.get('/', (req, res, next) => {
  connection.query(SELECT_QUERY, (err, results) => {
    if (err) {
      return res.send(err);
    } else {
      return res.json({
        agents: results
      });
    }
  });
});

module.exports = router;

App.js

import React, { Component } from 'react';
import Table from './components/Table';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Table />
      </div>
    );
  }

}

export default App;

表组件

import React, { Component } from 'react';
import Agents from './Agents';
import Loading from './Loading';

class Table extends Component {

  constructor(props) {
    super(props);

    this.state = {
      data: null
    };
  }

  componentWillMount() {
    this.renderMyData();
  }

  renderMyData() {
    fetch('/agents')
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({ data: responseJson })
      })
      .catch((error) => {
        console.error(error);
      });
  }

  render() {
    return (
      <div>
        {this.state.data ? <Agents data={this.state.data} /> : <Loading />}
      </div>
    );
  }
};

export default Table;

代理组件

import React, { Component } from 'react';
import ReactTable from 'react-table';
import 'react-table/react-table.css';

class Agents extends Component {

  render() {
    let { agents = undefined } = this.props.data;
    let data = agents

    let columns = [
      {
        Header: 'Agent ID',
        accessor: 'Agent ID'
      },
      {
        Header: 'First Name',
        accessor: 'First Name'
      },
      {
        Header: 'Last Name',
        accessor: 'Last Name'
      },
      {
        Header: 'Phone',
        accessor: 'Phone'
      }
    ];

    return (
      <div className="agent-table">
        <h1 align="center">Agents</h1>
        <br />
        <ReactTable
          data={data}
          columns={columns}
          defaultPageSize={15}
        />
      </div>
    );
  }
};


export default Agents;

我知道结果不应该受到限制，因为我希望用户能够看到所有记录，但是我不知道如何使用数据表进行处理。