React Suspense没有按预期工作
React Suspense是React框架中的一个特性，用于实现延迟加载和代码分割。它的主要目的是提高应用程序的性能和用户体验。
React Suspense的工作原理是通过在组件树中添加一个Suspense组件来实现的。Suspense组件可以包裹一个或多个需要延迟加载的组件，并在加载过程中显示一个指定的加载状态（例如loading动画）。当延迟加载的组件准备好后，Suspense组件会自动显示该组件。
然而，如果React Suspense没有按预期工作，可能有以下几个可能的原因和解决方法：
- 版本兼容性问题：确保你正在使用的React版本支持Suspense特性。如果你的React版本较旧，可能需要升级到最新版本。
- 代码错误：检查你的代码是否正确地使用了Suspense组件。确保你正确地将需要延迟加载的组件包裹在Suspense组件中，并设置好加载状态。
- 异步加载问题：如果你的组件是通过异步加载方式引入的（例如使用import()函数），确保你正确地处理了异步加载的过程。你可以使用React.lazy()函数来实现组件的异步加载。
- 依赖问题：检查你的项目依赖是否正确安装。有时候，缺少或错误安装某些依赖可能导致Suspense不起作用。
- React渲染模式问题：如果你的应用程序使用了服务器端渲染（SSR），可能需要特殊处理Suspense的使用方式。确保你正确地在服务器端和客户端进行Suspense的配置。
总结起来，当React Suspense没有按预期工作时，需要检查React版本、代码正确性、异步加载、依赖安装和渲染模式等方面的问题。如果问题仍然存在，可以参考React官方文档或社区论坛寻求更多帮助。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云函数（Serverless）：https://cloud.tencent.com/product/scf
- 腾讯云容器服务（TKE）：https://cloud.tencent.com/product/tke
- 腾讯云数据库（TencentDB）：https://cloud.tencent.com/product/cdb
- 腾讯云CDN加速（CDN）：https://cloud.tencent.com/product/cdn
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iot
- 腾讯云移动开发（移动开发）：https://cloud.tencent.com/product/mad
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云虚拟专用网络（VPC）：https://cloud.tencent.com/product/vpc
相关·内容
请查看以下代码：
import React, { useEffect, lazy, Suspense } from 'react';
const LazyLoadedComponent = lazy(() => import('path/to/component'));
const App = () => {
useEffect(() => {
// Initialization depends on lazy element DOM measurments,
// i.e. their heights
init
浏览 2提问于2020-04-02得票数 2
1回答
代码：
React版本：
"dependencies": {
"react": "^18.1.0",
"react-dom": "^18.1.0",
},
"devDependencies": {
"@types/node": "^17.0.30",
"@types/react": "^18.0.8",
"@types/react-dom": "^18.0.3",
"ty
浏览 12提问于2022-05-02得票数 1
在.tsx中，这是预期的工作方式：
const LazyComponent = lazy(() => import("path-to-my-lazy-component"));
const SuspenseComponentTSX = (
<React.Suspense fallback={<div>Loading</div>}>
<LazyComponent />
</React.Suspense>
)
render(SuspenseComponentTSX);
但是在.ts中假设的等价物并不起
浏览 23提问于2021-10-29得票数 0
我正在尝试使用Webpack模块联合会将一个整体反应应用程序分解成微前端。
应用程序依赖于主机应用程序提供的上下文对象。上下文在主机应用程序中按预期工作，但在远程应用程序中不起作用。
我的代码如下所示：
主机应用
上下文和上下文提供者：
// TestContext.js
import React from 'libs/react';
export const TestContext = React.createContext("Not Initialized :(");
// LocalSample.js
import React from 'lib
浏览 8提问于2022-10-26得票数 1
2回答
你好，我的代码如下所示，试着用react 18来悬念，但是没有运气来渲染加载.
User.jsx
import React, { useEffect, useState } from "react";
export const User = () => {
const [user, setuser] = useState(null);
useEffect(() => {
const res = fetch("https://jsonplaceholder.typicode.com/todos/1")
.then((
浏览 15提问于2022-04-18得票数 4
回答已采纳
1回答
响应cdn的延迟导入
、、、
我遵循这个指南，使用React路由器和悬念来进行延迟加载：
这是我到目前为止的代码：
import React, { lazy, Suspense } from 'react';
import { Link, Route, BrowserRouter as Router, Switch } from 'react-router-dom';
const HomePage = (
lazy(() => (
import('./pages/HomePage')
))
);
const BookingsPage = (
l
浏览 0提问于2019-02-05得票数 3
回答已采纳
1回答
将函数组件转换为类组件
、、、、
我正在使用react react-i18next包进行语言翻译。
我拥有的函数组件工作正常，没有任何错误。
import React, { Suspense } from 'react';
import { useTranslation } from 'react-i18next';
function MyComponent() {
const { t, i18n } = useTranslation();
return (<Suspense fallback="loading">
<h1>
浏览 1提问于2019-08-28得票数 2
回答已采纳
1回答
我很难从clientWidth获得useEffect。
有一个lazyLoad，它向用户加载页面。
import {Suspense, lazy} from 'react';
const UsersContainer = lazy (() => import ('./ users / users-container'));
const Index = (props) => {
return (
<Suspense fallback = {<div id = {'loading'} />}&
浏览 5提问于2021-02-28得票数 5
2回答
我正在尝试使用实验性的新的React特性。
下面是我的简单useApi钩子(如果我正确理解悬念的话)，它要么返回fetch调用的结果，要么抛出吊杆承诺。(稍作修改的)
function useApi(path) {
const ref = React.useRef({ time: +new Date() });
if (!ref.current.suspender) {
ref.current.suspender = fetch(path).then(
data => ref.current.data = data,
error => ref
浏览 0提问于2020-10-07得票数 1
回答已采纳
当我的Powers被获取/未定义时，我想呈现回退组件。我使用下面的代码在我的逻辑中实现了React.Suspense： <Suspense fallback={<p>Loading</p>}>
<RoutesPowers />
</Suspense> 我的RoutesPowers是 const Powers = [ ... ];
const RoutesPowers = () => {
const [powers, setPowers] = useState(null);
const fetchPowers =
浏览 54提问于2020-08-21得票数 0
回答已采纳
1回答
也许有一种更好的方法，但我试图让我的React组件尽可能地可重用。所以我使用的是Bootstrap卡，在这个卡里面我想从外部动态地放置不同的组件(带有道具)。没有道具，它就能正常工作。但在使用props时，我得到了一个错误消息" error : Cannot find module '../../pages/Dummy'“。
这样做效果很好：
import React, {Suspense} from 'react';
import { MDBCard, MDBCardBody } from "mdbreact";
const Area
浏览 10提问于2019-11-25得票数 0
回答已采纳
1回答
嗨，所有我是新的，在下/反应，我试图懒惰加载一个组件。我所期望的是，当组件在用户视图端口中可见或页面被完全呈现时，它必须加载。它的html代码不应该出现在第一个响应中。但是在调试之后，我发现它不像预期的那样工作。
我试过以下方法
index.js
const ProductTabbedWidget = React.lazy(() => import('../../../components/ProductSearch/ProductTabbed/ProductTabbedWidget'));
和
const ProductTabbedWidget = dynamic(()
浏览 12提问于2022-06-03得票数 0
2回答
使用React路由器v6，我希望呈现回调页面。虽然我无法从屏幕中的元素支柱中获得输出。我只从out获得输出，并且总是为回调页提供一个空白屏幕或404。我错过了什么新的反应路由器？
const App: React.FC = () => (
<>
<GlobalStyle />
<Suspense fallback={<Loading fullScreen />}>
<Routes>
<Route path="/" element={<PrivateRou
浏览 4提问于2022-01-18得票数 3
回答已采纳
在我使用React路由器的react应用程序中，我用来定义这样的路由：
<Route exact path={Paths.landing} component={Awaiting(starWars)} />
使用如下定义的“等待助手”：
import React, { Suspense } from "react";
function Awaiting<T>(Component: React.ComponentType<T>) {
return (props: T) => (
<Suspense f
浏览 9提问于2022-11-06得票数 1
1回答
我正试图在我的React应用程序中启用动态导入。大多数React示例将应用程序呈现为替换内容的一些标记，例如：
ReactDOM.render(<App />, document.getElementById('app'));
但是，我需要将静态块保存在#app元素中，并且呈现的反应如下：
let container = document.createElement('div');
ReactDOM.render(<App />, container);
let app = document.getElementById('ap
浏览 0提问于2018-12-10得票数 1
回答已采纳
我成功地在heroku.com上部署了我的react应用程序。我只能通过单击页面上可用的NavLinks来导航到页面。
问题--当我在url中手动输入任何内容(例如/contact或/product )时，它不工作，并给出错误“不能获取/Contact”或不能获取/product。也不显示应用程序中可用的404页。
<Suspense fallback={<Loader />}>
<Routes>
<Route
浏览 6提问于2022-03-24得票数 0
1回答
我正在使用"@reach/router": "^1.2.1"，并且在我的App.js文件中，我有一个后备组件可以在我的路由加载时显示出来： <React.Suspense fallback={<MainLandingPageLoadingScreen />}>
<Router>
<MainLandingPage path="/" />
<AnotherLandingPage path="/coolbeans" />
<NotFound
浏览 14提问于2019-05-29得票数 3
1回答
在比较快照之前，我试图使用@testing-library/react waitfor等待延迟加载的组件。
App.tsx就是这样的：
const MyComponent = lazy(() => import('my/component'));
function App() {
return (
<Suspense
fallback={
<div>
<h1>Loading…</h1>
</div>
}
浏览 3提问于2022-04-19得票数 2
回答已采纳
我是TypeScript的新手，我想用它来做反应。我有一个需要像这样导出的功能组件：
import React from 'react';
import HOC from './HOC';
interface PropsType {
someProp: boolean;
}
const MyFunctionalComponent: React.FC<PropsType> = ({ someProp }) => {
return(
...
)
};
export default HOC(MyFunctionalCompo
浏览 3提问于2020-06-09得票数 0
回答已采纳
关于React.Suspense，我有几个问题。
下面是一些供参考的示例代码：
// components/ComponentA/index.js
import React from "react";
const style = {
display: "grid",
placeItems: "center"
};
export default function ComponentA() {
return <div style={style}>I am componentA</div>;
}
// compon
浏览 4提问于2020-12-29得票数 4
2回答
我使用了React-i18next，就像下面的例子一样。
import React, { Suspense } from 'react';
import { useTranslation } from 'react-i18next';
function App() {
return (
<Suspense fallback="loading">
<MyComponent />
</Suspense>
);
}
但是，悬念破坏了我的另一个组件，即react-masonry-l
浏览 0提问于2019-11-15得票数 10
2回答
// project/src/App.js
import React, { Suspense, lazy } from "react";
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import {NavBar, Loading} from "./components";
import './index.css';
const Home = lazy(() => import('./components/hom
浏览 5提问于2021-09-23得票数 2
回答已采纳
错误是：“元素类型无效:需要一个字符串(对于内置组件)或一个类/函数(对于复合组件)，但得到的是:object。”
我没有看到任何错误，感谢你的帮助！
import React, { lazy, Suspense } from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import NavWrapper from "./NavWrapper";
const Home = lazy(() => import("./Home
浏览 9提问于2019-08-02得票数 0
1回答
我对反应路由器相当陌生..。我使用的是React路由器-dom 5.0.0
由于某些原因，我的仪表板路径不匹配，当我导航到/dashboard时没有呈现任何内容
import React, { Suspense } from 'react';
import ReactDOM from 'react-dom';
import { MuiThemeProvider } from '@material-ui/core/styles';
import theme from './theme';
import { BrowserRout
浏览 0提问于2019-06-01得票数 0
回答已采纳
我是新的反应，正在尝试React.lazy和悬念进口，我只想说，我爱他们！我的网站从45%的性能提高到50-60%，这是没有优化图像！谷歌搜索结果，我来了！
但是，我有一个问题，我不知道如何延迟加载一个组件，这个组件是在我的自定义ProtectedRoute中呈现的，并且响应路由器-dom v5。
延迟加载工作，并生效时，我使用的反应-路由器-多国本机路由，但当我想通过一个通过我的自定义保护路由一个受保护的组件，什么都不会发生，没有错误信息在控制台或网站上，只有一个白屏幕。我怀疑导入和代码放在错误的位置有问题。
应用程序
import React, { Suspense } from "
浏览 12提问于2022-03-24得票数 0
我创建了一个呈现图像的组件 这就是组件。 import React, { lazy, Suspense } from "react";
const Icon = (props) => {
const { src } = props;
return (
<img src={src} />
);
};
export default Icon; 然后我像这样使用它 import ExampleIcon from "./../images/icons/example.png";
...
<Icon
浏览 25提问于2020-09-12得票数 5
回答已采纳
1回答
我使用的是react: 16.6.0和redux设置的react router: 4.3.1
ReactDOM.render(
<Provider store={store}>
<Router basename={process.env.PUBLIC_URL}>
<App />
</Router>
</Provider>, document.getElementById('root'));
这是我的路线
<Suspense maxDuration={1500} fallback={
浏览 1提问于2018-11-05得票数 2
回答已采纳
我有一个带有一系列嵌套<Suspense>组件的React version 17应用程序。每一个都使用相同的<Loader>组件，该组件包含一个CSS动画微调器： <App>
<Suspense fallback={<Loader/>}>
<OuterWrapper>
<Suspense fallback={<Loader/>}>
<InnerWrapper>
{content}
</InnerWrapp
浏览 55提问于2021-08-04得票数 0
1回答
我使用的是reactjs的code-splitting延迟加载概念。但是<Suspense>似乎对我不起作用，因为它没有向我展示回退、加载消息和直接在它的渲染中加载代码。
我正在本地开发环境中运行react应用程序，而不使用它的生产版本。下面是我正在使用的代码。
import React,{ lazy, Suspense } from 'react';
class Homepage extends React.Component{
render(){
return(
<div>
<Suspense fallback=
浏览 5提问于2019-10-09得票数 1
回答已采纳
3回答
我正在使用React的最新版本(16.6)和react-router (4.3.1)，并尝试使用React.Suspense进行代码拆分。
尽管我的路由工作正常，代码确实拆分成了几个动态加载的包，但我收到了一个警告，告诉我不是返回函数，而是将对象返回给Route。我的代码：
import React, { lazy, Suspense } from 'react';
import { Switch, Route, withRouter } from 'react-router-dom';
import Loading from 'common/Load
浏览 9提问于2018-10-26得票数 20
回答已采纳
1回答
我有一个主要的react应用程序，我想把它分成两个应用程序--只使用一个主机。应使用路由执行拆分。 这是我的my main应用路由： import React, { Suspense } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import DesktopApp from './components/DesktopApp';
import MobileApp from './components/MobileApp&#
浏览 11提问于2021-06-20得票数 3
回答已采纳
我一直试图从数据库加载我的gltf文件，但它不工作。我尝试为model.js创建单独的页面，但仍然没有结果。很多人在网上寻找解决方案，但都没有成功。请帮帮忙。代码如下： import React, { useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux'
import { Canvas } from "@react-three/fiber";
import { useGLTF } from '@react-t
浏览 13提问于2021-04-23得票数 1
回答已采纳
2回答
我有几个部件。当param处于路径时，将处于活动模式，rest将处于非活动模式并显示消息。
所有组件都出现在页面上。一个是活跃的，其余的是不活跃但可见的。
组件需要读取url参数。
如果我使用路径，那么在每个时刻，我只能显示一个组件。想到的第一个解决方案是没有路径，只有路径旁。我需要读取app.js上的路由参数以显示active/deactive，也可以在app.js内部的子组件中读取相同的params。
当我们没有可匹配的路径时:如何在app.js中读取路由参数？如何将路由参数传递给子组件？
import React, { Suspense } from 'react
浏览 0提问于2019-03-16得票数 0
我遵循来为现有的React启用TypeScript。启动应用程序时，会出现以下错误：TypeError: Cannot read property 'lazy' of undefined
test版本为16.8.0 ( React，react dom，@type/react，react test-renderer)。
index.js (由于对代码和文本大小的堆栈溢出限制，并没有显示所有导入)
import React, { Suspense } from 'react';
const AsyncApp = React.lazy(() => i
浏览 5提问于2020-04-01得票数 0
我在我的react项目中使用google analytics，即使我在线，它也没有显示任何活跃用户。我尝试了网上找到的不同方法，但似乎都不起作用。我只在本地主机上尝试过，没有在已部署的网站上尝试，但我认为它应该仍然可以工作。
这是我的代码。
我的app.js
import React, { Suspense, useEffect } from "react";
import "./App.css";
import IntroPage from "./containers/IntroPage/IntroPage";
import Layout fr
浏览 5提问于2020-08-30得票数 6
1回答
反应悬念不起作用，我不知道为什么
、、、、
我得到了一个项目来找出为什么下面的几行代码不能工作。以下代码实现了React Suspense API，但操作不正确。关于这些组件如何利用悬念和并发模式，有3个核心问题，这是我不熟悉的，即使在阅读了文档后，我仍然无法修复它 import { Suspense, useState, useEffect } from 'react';
const SuspensefulUserProfile = ({ userId }) => {
const [data, setData] = useState({});
useEffect(() => {
fetc
浏览 16提问于2021-08-26得票数 0
注意:这在开发和生产中都会发生，我根本不使用<StrictMode>。
它似乎工作得很好：
B.js
export default function B()
{
return <p>B</p>
}
TestApp.js
import { lazy, Suspense } from "react";
const B = lazy(()=>import("./B"));
export default function TestApp()
{
const counter = useRef(0);
co
浏览 4提问于2022-08-11得票数 6
回答已采纳
我使用的是React代码，像这样拆分
const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));
const App = () => (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Routes>
<Route path="/
浏览 6提问于2022-02-21得票数 0
回答已采纳
2回答
我正在使用Parcel为我的应用程序和Shadow创建包。以下是我的配置，
///index.tsx file
import customCSS from "bundle-text:./assets/antd.scss"
const appContainer = document
.getElementById(config.containerId)
?.attachShadow({ mode: "open" }) as ShadowRoot
ReactDOM.render(
<React.StrictMode
浏览 15提问于2022-02-25得票数 1
Suspense缓存不适用于悬念。
我的代码
import React, { Suspense } from "react";
import ReactDOM from "react-dom";
import { unstable_createResource as createResource } from "react-cache";
const MarkdownCache = createResource(input => {
return new Promise(resolve => res
浏览 0提问于2019-01-18得票数 1
回答已采纳
有了React 18，我们就可以使用Suspense来有条件地呈现一个组件，一旦一个承诺实现了。
下面是一个基本的例子(在打字本中)：
function SomeComponent({dataId}) {
const supplier = createSupplier(dataId)
return (
<Suspense fallback={<div>Loading...</div>}>
<Something supplier={supplier}"/>
</Suspense>)
}
fu
浏览 4提问于2022-07-16得票数 0
回答已采纳
我有以下代码：
import React, { Suspense } from "react";
import { useTranslation } from "react-i18next";
import "../i18n";
const Loader = () => {
return (
<div>
<h3>loading...</h3>
</div>
);
};
export default props => {
const { t } =
浏览 1提问于2019-09-03得票数 2
回答已采纳
我正在尝试使用react-i18next作为react-admin的翻译提供程序。React-admin提供了有关如何设置custom translation provider的文档。 这很容易理解，我为i18next创建了一个： export const i18nProvider = {
translate: (key, { _, smart_count, ...rest } = {}) => {
return i18n.t(key, {
defaultValue: _,
count: smart_count,
浏览 13提问于2021-01-06得票数 0
我正在开发一个应用程序，如果下一页有任何尚未加载的延迟加载组件，则需要在页面之间进行转换。因此，我试图找出是否有任何方法可靠地检查一个延迟加载的组件是否已经完成加载。
此解决方案可以工作，但只有在延迟加载组件第一次尝试加载时才能工作--也就是说，如果延迟加载组件已经加载，则不会立即呈现。
import React, {PropsWithChildren, useEffect} from 'react'
export default function SuspenseTrigger(props) {
return (
<React.Suspense fallb
浏览 8提问于2020-06-24得票数 9
我正在使用一些非常标准的创建-反应-应用程序样板，它使用延迟加载和反应-i18ext作为翻译库。这个库使用i18Next-http-后端从远程API中获取翻译文件。
我想要了解的是，React.suspense到底是如何“识别”这个异步调用的，并在它完成之前显示回退UI。
Index.ts文件：
import "./i18n";//Notice this
const container = document.getElementById("root");
ReactDOM.render(
<StylesProvider jss={jss}
浏览 2提问于2021-09-05得票数 3
回答已采纳
1回答
向上、向下和横向地寻找解决这个问题的方法。
我的目标是分配延迟加载几乎所有组件在我的反应网站。然而，当这些组件进入和退出时，这些组件利用框架-运动页面转换.页面转换和延迟加载的组合将导致组件在单击“路由”时不再正确加载。
我从这篇文章()中找到了灵感，并试图介绍“反应懒惰-预加载”包()，但是我没有成功地让它开始工作。
有人知道这个问题的解决办法吗？我当然不能是唯一的人试图数据分裂一个反应网站，使用组件，有框架-运动页面过渡。
App.js代码如下：
import React, { Suspense } from 'react';
import { Switch, Route,
浏览 5提问于2021-02-22得票数 1
回答已采纳
2回答
如何正确使用drei？
、、、、
我想我是在遵循react-三个文档和许多其他示例，但无法像其他人那样让drei useGLTF工作。
我有一个简单的，从零开始，下一个反应-反应-三/纤维项目。我只是试着加载宇航员的例子并显示出来。
我相信下面的代码确实工作了一段时间。经过一些微小的更改和撤消之后，我想我回到了相同的代码中，而这段代码现在不能工作了。(我已经试过了，没有悬念。)
import { Canvas, Suspense } from '@react-three/fiber'
import { useGLTF } from '@react-three/drei'
function Mo
浏览 20提问于2022-03-23得票数 2
回答已采纳
1回答
在嵌套路由中实现延迟加载
、、、
我正在尝试在react应用程序中添加延迟加载，这在顶级路由中工作得很好。但是我也想要<Suspense></Suspense>，并为嵌套的路由提供一个退路。根据react路由器-dom，必须只有Fragment或Route作为Routes的子级.有办法处理这件事吗？
以下是代码：
import { lazy, Fragment, Suspense } from "react";
import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom";
impor
浏览 11提问于2022-02-10得票数 1
回答已采纳
2回答
所以这就是主要的想法，就是能够用React.lazy和React.Suspense加载任何封装的组件。有可能吗？所以，我已经能够写一些了，但不确定我是否能够正确地制作… import React, { Suspense, lazy, useState, useEffect } from "react"
export function withLazyImport(LazyComponent) {
return (props) => {
const [loadedComponent, setLoadedComponent] = useState(null)
浏览 23提问于2020-07-15得票数 2
回答已采纳
当我按Prev时，useRef数组不是未定义的：
但是，当我按Next时，useRef数组为null：
这两个按钮在单击时运行相同的函数(至少直到console.log)，但结果不同。
我试着把它们按不同的顺序运行，以及脑海中出现的所有其他东西。
任何帮助都是非常感谢的。
import React, { Suspense, useRef, useEffect, useState } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import { OrbitCo
浏览 3提问于2021-12-14得票数 0
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
腾讯云开发者
