在按钮单击时加载反应表的服务器数据

Question

我正在尝试显示一个带有服务器端分页的反应表，它工作正常。问题是 react-table 在页面加载过程中从服务器加载数据，但我试图仅在用户单击页面上的链接时才将数据加载到 react-table 中。

下面是 react-table 的代码：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import ReactTable from 'react-table';
import 'react-table/react-table.css';
import { Loader, Message } from 'semantic-ui-react';
import { getColumnHeaders } from '../components/search-result-headers/columnHelper';
import axios from 'axios';

const requestData = (pageSize, page, sorted, filtered,ROOT_URL) => {
   return new Promise((resolve, reject) => {
      // You can retrieve your data however you want, in this case, we will just use some local data.
       // construct the url and make a request to the search api
      const url = ROOT_URL + '?pageSize=' + pageSize+"&pageNo="+(page+1);
      axios.get(url).then(response => { 
         if(response.status === 200){
             // You must return an object containing the rows of the current page, and optionally the total pages number.
            const res = {
               rows: response.data.resultData.searchResults,
               pages: Math.ceil(response.data.resultData.totalAvailable / pageSize)
            };
            resolve(res);
         }else{
            console.log(`Error :${response.status}`);
         }
      }) 
    });
 }


class ResultsContainer extends Component {

   constructor() {
      super();
      this.state = {
        data: [],
        pages: null,
        loading: false
      };
      this.fetchData = this.fetchData.bind(this);
      this.forceUpdate();
    }

    fetchData(state, instance) {
      //set the loading message on table
      this.setState({ loading: true });
      let url = `/api/sample`;

      // Request the data from API
      requestData(
        state.pageSize,
        state.page,
        state.sorted,
        state.filtered,
        url
      ).then(res => {
        // Now just get the rows of data to your React Table (and update anything else like total pages or loading)
        this.setState({
          data: res.rows,
          pages: res.pages,
          loading: false
        });
      });
    }

   render() {
      // get the search results column header as per the search type
      let columns = getColumnHeaders(this.props.searchType);
      const { data, pages, loading } = this.state;

      return (
        <div>
          <ReactTable
            manual
            pages={pages}
            loading={loading}
            onFetchData={this.fetchData}
            defaultPageSize={10}
            filterable={true}
            data={data}
            columns={columns}
          />
        </div>        
      );
   }
}

export default ResultsContainer;

在这种情况下，当浏览器加载页面时，它会调用 api 并将数据加载到 react-table 中。我们如何在页面加载期间阻止 react-table 加载数据，而不是在用户单击页面上的链接时加载数据。

getColumnHeaders 的实现：

export function getColumnHeaders(searchType) {
   let columns = [];

if (searchType === 'RETURN_SEARCH') {

  columns =  [
      {
         Header: "Case",

         accessor: "caseId"
      },
      {
         Header: "Ticket",

         accessor: "ticketNo"
      },
      {
         Header: "Reason",

         accessor: "reason"
      }
      {
         Header: "Seller Name",

         accessor: "UserName"
      }
 ]

} else {
      //implement this feature later
    }

   return columns;
}

提前感谢您的任何帮助和建议。

Answer 1

您可以使用 react well 将数据加载到表中。我做了一个例子

<tbody id="tblcustomer">
          {this.state.tableInData.map(obj => {
              return(
                <tr>
                <td >{num++}</td>
                <td >{obj[1]}</td>
                <td >{obj[2]}</td>
                <td >{obj[3]}</td>
                <td >{obj[4]}</td>

                </tr>
              )
        
          })}
          </tbody>