Reactjs 添加React.lazy或React loadable并执行动态导入（代码拆分）会导致我的一些功能中断

我在寻找一种动态导入组件的方法，只需使用它们的名称，在查找了一段时间后，我了解了

代码拆分

以及

React.lazy

、

React loadable

和

loadable component

等内容，我做了一些测试用例，在了解了一切是如何工作的之后，我设法将它植入到我的项目中，并重构我的类以使用它
我遇到的主要问题是我的应用程序中有一些东西坏了，例如我的

复选框
不工作和。。。在将动态导入从渲染内部移动到外部，在一个函数内，然后调用该函数并传递一个道具来执行动态导入后，我成功地解决了这个问题，现在另一件事情被破坏了，我担心，可能会发生更多类似的事情，这是因为动态导入的工作方式吗？！我应该停止使用它吗？？，我花了一整天的时间试图理解我以前工作的代码有什么问题

现在我的问题是，我是否必须遵循某种指导原则来使用动态编码，而我不是，现在它使我的代码中断，或者这些方法在某些情况下太过实验性，有点缺陷？！，或者，对于一个已经完成了一半的项目来说，向项目中添加类似的内容已经太晚了？，

以下是我的代码及其最新更改，以便您大致了解我的工作：

const AsyncPage = loadable(props => import(`${props.page}`))

class MyClassComponent extends Component {
    render  () {
        const importPath = './UI/' + UIType + '/' + UIType; 
        return (                            
            <AsyncPage page={importPath} {someOtherComponentProps}>{UIchildrens}</AsyncPage>
        )
    }
}

const AsyncPage=loadable（props=>import（`${props.page}`）
类MyClassComponent扩展了组件{
渲染（）{
常量importPath='./UI/'+UIType+'/'+UIType；
报税表（
{UIchildrens}
)
}
}

非常感谢您的帮助和提示。

更新01:

我设法解决了当前的问题！，似乎我的一张地图上有相同的钥匙，这导致了这个特殊的问题！，有趣的是，这只发生在我添加了延迟加载之后！正常导入也可以，奇怪，但我想他们确实提到地图中没有一个好的键会导致奇怪的问题
如中所述，您应该使用React.lazy和suspend的组合来运行。您不必使用其他库，因为React已经为您提供了这些库。因此，首先是导入，它看起来不错，但应该移动到使用：

但这只是让它运行的过程的一半。由于直接在呈现函数中呈现页面，因此在加载页面时页面将中断。这就是为什么必须将所有react.lazy调用包装在组件中，这将在加载页面时呈现回退：

class MyClassComponent extends Component {
render  () {
    const importPath = './UI/' + UIType + '/' + UIType;         
    const AsyncPage = React.lazy(() => import(importPath));
    return (       
        <Suspense fallback={'...Loading}>            
            <AsyncPage {someOtherComponentProps}>{UIchildrens}</AsyncPage>
        </Suspense>         
    )
}}

类MyClassComponent扩展组件{
渲染（）{
常量importPath='./UI/'+UIType+'/'+UIType；
const AsyncPage=React.lazy（（）=>import（importPath））；
报税表（
如中所述，您应该使用React.lazy和suspend的组合来运行程序。您不必使用其他库，因为React已经为您提供了这些库。因此，首先是导入，它看起来不错，但应该使用：

但这只是使其运行的过程的一半。由于您直接在呈现函数中呈现页面，因此在加载页面时它将中断。这就是为什么您必须在组件中包装所有react.lazy调用，这将在加载页面时呈现回退：

class MyClassComponent extends Component {
render  () {
    const importPath = './UI/' + UIType + '/' + UIType;         
    const AsyncPage = React.lazy(() => import(importPath));
    return (       
        <Suspense fallback={'...Loading}>            
            <AsyncPage {someOtherComponentProps}>{UIchildrens}</AsyncPage>
        </Suspense>         
    )
}}

类MyClassComponent扩展组件{
渲染（）{
常量importPath='./UI/'+UIType+'/'+UIType；
const AsyncPage=React.lazy（（）=>import（importPath））；
报税表（
使用react loadable时，我发现如果我将所有URL放在一个变量中，它找不到模块，我得到module not found错误。但如果我使用字符串文字作为基址，它将起作用。因此，例如，以下内容对我不起作用：

加载程序：（）=>导入（item.url）

虽然这一条有效：

加载程序：（）=>导入（'./示例/'+项.fileName）

使用react loadable时，我发现如果我将所有URL放在一个变量中，它找不到模块，我得到module not found错误。但如果我使用字符串文字作为基址，它将起作用。因此，例如，以下内容对我不起作用：

加载程序：（）=>导入（item.url）

虽然这一条有效：

加载程序：（）=>导入（'./示例/'+项.fileName）

我决定不使用React.lazy
并使用其他库的原因是，它抛出一个错误，表示找不到我的模块！！
错误：找不到模块。/UI/Card/Card
，现在经过一些测试，我得到了React.lazy或其他库不支持相对或绝对（使用
webpack
）路径，所以我将我的
UI
文件夹移到了我想从中执行动态导入的类旁边，这解决了第三方库的问题，但是React.lazy仍然找不到模块！您是否正在创建-React.app？我是这样使用它的，它是相对的，只起作用：const Settings=React.lazy（（）=>import（'../containers/Routes/Settings'））；所以这可能是一个网页问题，而不是react.lazy问题。我决定不使用react.lazy
并使用其他库的原因是，它抛出一个错误，说它找不到我的模块！！
错误：找不到模块。/UI/Card/Card
，现在经过一些测试，我得到了react.lazy或其他库不支持相对或绝对（使用
webpack
）路径，因此我将我的
UI
文件夹移动到我想从中执行动态导入的类旁边，这修复了第三方库的问题，但React.lazy仍然找不到模块！你是sung create-React.app吗？我正在这样使用它，并且