Javascript 如何为React中的功能组件异步加载道具

我试图加快我的应用程序，为了做到这一点，我懒得加载一些组件。我的一个功能组件是从一个.json文件加载的，最好也是延迟加载，但我不知道如何做到这一点。我的代码当前如下所示：

import React from 'react';
import Presentation from "../Presentation";

const data = () => import("../assets/sample.json");

const Finder = (props) => {

    const {prop1} = props;

    return ( <Presentation data={data} selection={prop1} /> );
};

export default Presentation;

从“React”导入React；
从“./Presentation”导入演示文稿；
const data=（）=>import（“../assets/sample.json”）；
常量查找器=（道具）=>{
常量{prop1}=props；
返回（）；
};
导出默认演示文稿；

---

尝试呈现演示文稿组件时，失败并出现错误（数据未定义）。如何延迟加载json文件？是否可以使用react可加载库？谢谢

使用

React.lazy

或

suspend

，查看更多详细信息。使用const data=React.lazy（（）=>import（../assets/sample.json）），会给我相同的错误。能否显示错误消息？错误消息来自表示组件，表示数据未定义。无法读取未定义的属性“map”。