标签: react-suspense

我正在尝试在 Nextjs 中延迟加载带有悬念和动态导入的数据列表。但出现以下错误：

Error: This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition.

我尝试过使用 startTransition() 但不明白如何使用它。

数据列表.tsx：

Error: This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition.

数据页.tsx

import React, { useState …

React \xe2\x80\x94 Suspense 组件中有一个新的很酷的功能。目前它只正式支持使用 React.lazy 函数创建的组件。但非官方众所周知，内部 Suspense 组件是通过在渲染树中更深入地抛出一个承诺来触发的，并且有一些库已经采用了这种技术来带来新的很酷的开发人员体验，例如：

\n
• 反应-i18next
\n
• 反应中继
\n
• 反应查询
\n

还有一个使用它的核心反应包react-cache（当然是非官方的）。

考虑到这一切，我有点困惑，因为 React 文档中没有提到抛出 Promise（换句话说，是什么触发了 Suspense 组件），但同时有很多讨论和库使用它。在 Twitter 讨论中，dan abramov回答说API 可能会发生变化。但情况仍然令人困惑。

所以问题是：在生产中开始使用这种技术是否安全？如果没有，那么我如何使用已经采用它的库（甚至基于 facebook 的）？最后，如果 API（抛出 Promise）是将来要更改的主题，我可以保证这只是我自己的实现中需要采用的微小更改吗？

谢谢各位！

更新

根据这些问题（一、二），他们似乎仍然不确定未来的 API。他们很可能会提供一个公共 API（可能他们指的是反应缓存或更通用的东西），这本质上只是抛出 Promise 机制的包装。

我想知道是否有一种好方法可以防止反应中的后备闪烁。我正在使用反应路由器，问题是当一个组件被挂起时，回退加载器会非常快地闪烁，这很烦人。我在这里看到了答案React suspense/lazy delay? 如下所示：

const Home = lazy(() => {
  return Promise.all([
    import('./components/Home'),
    new Promise(resolve => setTimeout(resolve, 500))
  ]).then(([moduleExports]) => moduleExports);
});

但我的问题是我有一个带有透明背景的覆盖加载微调器，并且组件在承诺得到解决之前实际上不会加载。这会使页面在没有内容的情况下挂起半秒，实际上比微调器的闪烁更烦人。

所以我想问题是有没有人找到处理这个问题的好方法。我真的很想在页面中添加类似 nprogress 的东西，但不知道如何使用 React.suspense 来实现它。我可能只需要回去使用 react loadable 但我真的不想当 react 具有基本相同的开箱即用功能时。

我有以下组件树：

<BrowserRouter>
  <Suspense fallback={<h1>MyFallback</h1>}>
    <Switch>
      <Route component={HomePage} path="/" exact />
      <Route
        component={lazy(() => import('./pages/Auth/Login'))}
        path="/auth/login"
        exact
      />
    </Switch>
  </Suspense>
</BrowserRouter>

我React.Suspense用来显示加载回退。但是，现在我想在当前页面的顶部显示一个进度条，而不是使用正常的 Suspense 加载回退，这会删除整个当前路线以显示回退。

例如，如何添加 NProgress 以指示正在加载的页面的加载进度？

也许新的 React 的并发模式可以帮助解决这个问题？:)

我有一个使用 MUI 的 React 应用程序，现在我已经使用微调器实现了悬念，它在加载内容时作为后备组件启动。我很想为回退组件添加淡入/淡出过渡，因为目前这种变化太突然了。

我的设置（对于这个特定问题的相关部分）如下：

依赖关系

    "@glidejs/glide": "^3.4.1",
    "@material-ui/core": "4.8.3",
    "@material-ui/icons": "4.5.1",
    "@material-ui/lab": "4.0.0-alpha.39",
    "@material-ui/pickers": "3.2.10",
    "@types/autosuggest-highlight": "^3.1.0",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "@types/react-redux": "^7.1.7",
    "autosuggest-highlight": "^3.1.1",
    "connected-react-router": "^6.8.0",
    "history": "^4.10.1",
    "node-sass": "^4.13.0",
    "react": "^16.12.0",
    "react-date-picker": "^8.0.0",
    "react-dom": "^16.12.0",
    "react-feather": "^2.0.3",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0",
    "redux-devtools-extension": "^2.13.8",
    "redux-ducks-ts": "^1.0.9",
    "redux-logger": "^3.0.6",
    "redux-saga": "^1.1.3",
    "reselect": "^4.0.0",
    "styled-components": "^4.4.1",
    "typescript": "~3.7.2"

路由器块

这是应用程序的主要路由器，它有一个RouteWithSubRoutes组件接收路由作为参数并渲染react-render-dom路由组件，但基本上充当路由器切换容器

import React, { FC, Suspense } from "react";
import …

我正在使用 React 路由器根据特定的 url 呈现我的不同页面。不，我想使用React.lazy来延迟加载我所有的页面组件：

import React from "react";

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

const Page = React.lazy(() => {
  return import("./Page");
});

const App = () => {
  return (
    <Router>
      <React.Suspense fallback={<div>Loading page...</div>}>
        <Switch>
          <Route exact path="/">
            <h1>Home</h1>
            <Link to="/page">Go to another page</Link>
          </Route>

          <Route path="/page" component={Page} />
        </Switch>
      </React.Suspense>
    </Router>
  );
};

export default App;

这项工作非常好，但是当我转到 时，我的/page所有内容都Home消失了，我只能看到后备Loading page...组件（页面消失然后另一个页面很快出现，这让用户感到不安）。

这是默认的行为，React.Suspense但有在这种情况下，一种方法来保持呈现在屏幕上的实际主页用的 …

假设我有一个如下所示的设置：

function App() {
  return (
    <React.Suspense fallback={<SomeOtherComponent />}>
      <SomeComponent />
    </React.Suspense>
  );
}

在开发过程中是否有一种简单的方法可以触发<SomeComponent />暂停一段设定的时间，以便我可以看到回退状态是什么样子？

我想要这个，因为我试图确保我的回退状态看起来正确，并且到非回退状态的转换看起来不会很卡顿。我希望有一个解决方案可以使组件在 Javascript 端以编程方式挂起。

这是我拥有的两个组件，我的问题是我应该在哪里放置 <React.Suspense> 组件来根据需要加载路由？

导航/index.jsx

import React from "react";
import {
  RouterProvider,
  createBrowserRouter,
  createRoutesFromElements
} from "react-router-dom";
import Root from "./Root";

const router = createBrowserRouter(createRoutesFromElements(Root));

const Navigation = () => {
  return <RouterProvider router={router} />;
};

export default Navigation;

根.jsx

import React from "react";
import { Route } from "react-router-dom";

const PublicLayout = React.lazy(() => "../Layouts/PublicLayout");
const PrivateLayout = React.lazy(() => "../Layouts/PrivateLayout");

const Index = React.lazy(() => "../Pages");
const Welcome = React.lazy(() => "../Pages/Welcome");
const Login = React.lazy(() => "../Pages/Login");
const …

将useState钩子的 setter 函数用作回调 ref 函数是否安全？这是否会导致 Suspense 或其他即将到来的 React 更改出现问题？如果“是的，这没问题”，那就太酷了！如果“不”为什么不呢？如果“可能”，那么什么时候可以，什么时候不行？

我这么问是因为我的一个组件在调用 DOM API 之前需要挂载三个 refs。其中两个必需的 ref 是通过 JSXref道具在同一组件中分配的“普通” ref 。另一个 ref 将在稍后的某个时间通过 React 上下文分配到一个深层嵌套的组件中。我需要一种方法来在安装所有三个引用后强制重新渲染父组件，并useEffect在卸载任何引用时强制进行清理。

最初我编写了自己的回调引用处理程序，它调用了useState我存储在上下文提供程序中的setter。但后来我意识到useStatesetter 做了我自己的回调 ref 所做的一切。仅使用 setter 而不是编写自己的回调 ref 函数是否安全？或者有没有更好和/或更安全的方法来做我想做的事情？

我尝试谷歌搜索"useState" "callback ref"（和其他类似的关键字变体）但结果没有帮助，除了@theKashey的优秀use-callback-ref包我肯定会在其他地方使用（例如，当我需要将回调引用传递给组件时）需要一个 RefObject，或者当我需要一个回调并在本地使用一个 ref 时）但在这种情况下，所有回调需要做的就是在 ref 更改时设置一个状态变量，所以 Anton 的包在这里似乎有点过分了。

下面和https://codesandbox.io/s/dreamy-shockley-5dc74 有一个简化的例子。

import * as React from 'react';
import { useState, forwardRef, useEffect, createContext, useContext, useMemo } from 'react';
import { …

我有一个 NextJS 项目，我尝试使用 SWR 来获取数据。我的问题是：

useSWR当我在一个组件中使用两个以上的-hooks 时，我会收到以下钩子错误：

• Warning: React has detected a change in the order of Hooks called by ComponentExample. This will lead to bugs and errors if not fixed.
• Uncaught Error: Update hook called on initial render. This is likely a bug in React. Please file an issue.

这是最小复制代码存储库：https ://github.com/LarsFlieger/swr-suspense-multiple

我正在Component.tsx尝试进行 3 次提取并控制台记录输出：

"use client";

import useSWR from "swr";

const fetchWithDelay = async (url: string) => {
    const delay = parseInt(url) * 1000;
    await …