javascript - 如何在 react 表上实现延迟加载数据？

Question

我正在获取大量数据，同时我想延迟加载 react 表

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

来自文档:

The fallback prop accepts any React elements that you want to render while waiting for the component to load. You can place the Suspense component anywhere above the lazy component. You can even wrap multiple lazy components with a single Suspense component.

试试这个，

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