Загружать данные сервера таблицы реакций по нажатию кнопки

Question

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

Ниже приведен код для реагирующей таблицы:

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 и загружает данные в реагирующую таблицу. Как мы можем заблокировать таблицу реакции от загрузки данных во время загрузки страницы, вместо этого данные должны загружаться, когда пользователь нажимает на ссылку на странице.

Реализация для 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>