Javascript 有没有办法检查延迟加载的组件（带有React.lazy）是否已完成加载？

我正在开发一个应用程序，在这个应用程序中，如果下一个页面中有任何延迟加载的组件尚未加载，我们希望延迟页面之间的转换。因此，我试图找出是否有任何方法可以可靠地检查延迟加载的组件是否已经完成加载

这个解决方案是有效的，但是只有当延迟加载的组件第一次尝试加载时——也就是说，如果延迟加载的组件已经加载，所以它不会立即呈现

import React, {PropsWithChildren, useEffect} from 'react'

export default function SuspenseTrigger(props) {
  return (
    <React.Suspense fallback={
      <>
        {props.fallback}
        <Trigger onLoad={props.onLoad} onComplete={props.onComplete} />
      </>
    }>
      {props.children}
    </React.Suspense>
  )
}

function Trigger(props) {
  useEffect(() => {
    if (props.onLoad) {
      props.onLoad()
    }

    return () => {
      if (props.onComplete) {
        setTimeout(props.onComplete)
      }
    }
  }, [])

  return <></>
}

这不起作用，因为即使其他元素未完全加载，

suspend

的子元素也会立即渲染。因此

onLoad

和

onComplete

会立即被调用，而不管suspend是否已完成加载

为了解决这个问题，我还尝试了一些更奇特的状态检查。最困难的事情是检查是否已经呈现了回退，我不知道如何可靠地执行。我试着在检查前等待100毫秒，但由于某些原因，即使这样也不能可靠地工作。也许可以使用

useRef

---

有什么想法吗？

你有没有尝试过将你的

{props.children}

包装在一个加载器功能组件上，然后使用LayoutEffect执行onComplete函数

这里只是一个原始的想法，但它可能会起作用

const-Loader=（{onLoad，onComplete，children}）=>{
if（onLoad）{
onLoad（）；
}
useLayoutEffect（（）=>{
如果（未完成）{
onComplete（）；
}
}, []);
返回儿童；
}

{props.children}

您能为孩子们添加第二个触发器吗，像这样

{props.children}

我一直收到这样的警告：在呈现不同组件（

加载程序

）时无法更新组件（

基本路由

）。要在

Loader

中找到错误的setState（）调用，请按照BrowserRouter中路由器（由BrowserRouter创建）中布局（在App.js:21）中的BaseRoutes（在BaseRoutes.js:80）中的Loader（在BaseRoutes.js:81）中的悬念（在BaseRoutes.js:80）中所述的堆栈跟踪（在App.js:20）在App中（在src/index.js:55）

function ensureLoadCompleteCalled() {
  onLoad()
  onComplete()
}

return (
  <React.Suspense fallback={/* same as before */}>
    {props.children}
    <Trigger onLoad={ensureLoadCompleteCalled} />
  </React.Suspense>
)