Как я могу реализовать отложенную загрузку данных в таблицу реагирования?

Question

Я собираю большое количество данных, а пока хочу лениво загрузить таблицу реагирования

import React, {Component, Fragment, lazy, Suspense} from 'react'; 
const ReactTable = lazy(() => import("react-table")); 
render() 
{ 
return ( 
<Suspense fallback={<div>Loading...</div>}> 
{this.state.securityCheck.length ? 
<ReactTable columns={columns} data={this.state.securityCheck} /> 
: 
<div className='text-center' style= {{fontSize: '20px'}}>No data =
Available! </div> } 
</Suspense> 
) 
}

Answer 1

Из документов:

Резервный реквизит принимает любые элементы React, которые вы хотите визуализировать, ожидая загрузки компонента. Вы можете разместить компонент Suspense в любом месте над ленивым компонентом. Вы можете даже обернуть несколько ленивых компонентов одним компонентом Suspense.

Попробуйте это,

<Suspense fallback={<div>Loading...</div>}> 
   <ReactTable columns={columns} data={this.state.securityCheck} /> 
</Suspense>