错误:React组件在渲染时挂起，但没有指定回退UI

Question

我正在尝试使用https://github.com/adarshpastakia/ant-extensions/tree/master/modules/searchbar

我已经添加了教程的代码，但得到一个错误，是库坏了吗?在他们的故事板上工作

<SearchBar collapsed={false} filters={[]} fields={[]} emptyField={"Message when fields list is empty"} />

错误:React组件在渲染时挂起，但没有指定回退UI。

在树的更高位置添加一个组件，以提供要显示的加载指示符或占位符。在未知在div在未知(由SearchBar创建)在div中(由SearchBar创建)在I18nextProvider(由ContextProvider创建)在ContextProvider(由SearchBar创建)

我试过了

<Suspense fallback={<div>Loading... </div>}>

<SearchBar collapsed={false} filters={[]} fields={[]} emptyField={"Message when fields list is empty"} />
</Suspense>

但是它仍然卡在Loading…并且不渲染组件

我需要一些像他们的故事书中的例子:https://ant-extensions.herokuapp.com/?path=/docs/search-bar-example--example

更新:condesandbox在这里:https://codesandbox.io/s/magical-voice-h5gbk?file=/src/App.js

我现在得到这个错误:元素类型无效收到一个解析为:undefined的承诺。惰性元素类型必须解析为类或函数。

Answer 1

自定义组件

import { SearchBar } from "@ant-extensions/searchbar";
const CustomComponent = () => <SearchBar {...props}/>
export default CustomComponent;

现在延迟加载

import { lazy , Suspense } from "react";
const SearchBar = lazy(() => import("path_to_/CustomComponent"))
....
return <Suspense fallback={<div>Loading... </div>}>
<SearchBar {...props}/>
</Suspense>

Answer 2

SearchBar是lazyLoaded吗?

const SearchBar = lazy(()=> import("mypath"))