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

Question

我正在寻找一种方法来动态导入我的组件，只需使用它们的名称，经过一段时间后我了解了code splitting 和React.lazy、react-loadable 和loadable-component 之类的东西，我做了一些测试用例，在了解了一切是如何工作的之后，我设法将它植入我的项目并重构我的类以使用它
我遇到的主要问题是我的应用程序中的一些东西坏了，例如我的checkbox 不工作并且......在将动态导入从渲染内部移动到外部，在一个函数中然后调用之后，我设法解决了这个问题那个函数并传递一个道具来做一个动态导入，现在另一件事被打破了，我担心，更多这样的事情可能会发生，这是因为动态导入是如何工作的吗？！我应该停止使用它吗？？我花了一整天的时间试图了解我以前工作的代码有什么问题！
现在我的问题是，我是否必须遵循某种指导方针才能使用我没有的动态编码，现在它使我的代码中断，或者这些方法在某些情况下是否过于实验性和有点错误？！或对于一个已经完成一半的项目来说，添加这样的东西到项目中可能为时已晚？，
这是我的代码及其最新更改，以便您大致了解我在做什么：

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

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

非常感谢任何帮助和提示。
Update01：
我设法解决了当前的问题！似乎我的一张地图中有相同的键，这导致了这个特定的问题！有趣的是，这仅在我添加延迟加载后才会发生！它在正常导入时工作正常，很奇怪，但我想他们确实提到地图中没有好的键会导致奇怪的问题

Answer 1

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

加载器：() => 导入(item.url)

虽然这个工作：

loader: () => import('./example/' + item.fileName)

Answer 2

正如react docs 中提到的，您应该结合使用 React.lazy 和 Suspense 来运行。你不必使用其他库，因为 React 已经为你提供了这些。所以首先是你的导入，看起来不错，但应该移动到使用React.lazy：

const AsyncPage = React.lazy(() => import(`${props.page}`));

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

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>         
    )
}}

这将在组件加载时显示回退（加载字符串），并在下载完成后显示页面。这应该是开箱即用的，它不应该破坏和功能，snceit 是可选的，即插即用，无需更改您的反应代码的工作方式。

希望这会有所帮助。编码愉快。