javascript - 错误 : A React component suspended while rendering, 但未指定后备 UI

Question

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

我已在教程中添加了代码，但出现错误，该库是否已损坏？在他们的 Storyboard上工作

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

但它仍然卡在正在加载...并且不渲染组件

我需要类似他们故事书上的示例:https://ant-extensions.herokuapp.com/?path=/docs/search-bar-example--example

更新:此处压缩沙盒:https://codesandbox.io/s/magical-voice-h5gbk?file=/src/App.js

我现在收到此错误: 元素类型无效。收到的 promise 解析为:未定义。惰性元素类型必须解析为类或函数。

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>