使用react-table v7库,我创建了一个表。我在这个表中提供的数据被预取并保存为JSON。这个JSON文件具有react-table所需要的格式。
但是我的数据非常庞大,而且有很多很深的层次结构,我正在创建扩展选项表,当我将这些数据输入到react-table时,渲染时间太长,这降低了应用程序的整体速度。
我想添加延迟加载,这样当用户单击扩展选项时,该行的子数据应该从我的数据中动态添加。我指的是这个example延迟加载在这个例子中,子数据是在点击时提取的,是随机创建的,没有层次结构需要维护。在我的例子中,数据已经存在,当用户单击扩展行按钮时,我希望获取该特定行的子行。
总之,当用户单击父行时,如何获取子行?
我附加了一个link到代码沙箱,我在那里创建了静态数据的React表。
让我知道,如果我错过了什么或您需要更多的细节。谢谢
我尝试使用前面提到的示例实现延迟加载,但是该示例中延迟加载行的数据是随机生成的,而在我的情况下,我希望获取父行的展开按钮被按下的行的数据。
1条答案
按热度按时间jgovgodb1#
你可以使用
useEffect
钩子来加载数据。创建一个状态变量来存储数据,并创建一个状态变量来存储当前数据页:
使用useEffect:
然后传入
pageData
状态变量作为数据属性添加按钮以加载下一页数据
最后,在组件中呈现表格和按钮,可能如下所示:
希望这能有所帮助。