1

我正在考虑实现一个加载屏幕来检查是否加载了所有组件，但遇到了这种奇怪的模式。使用下面的代码，我进入App false控制台启动，在 delayHTML 函数返回数据 2000 毫秒后，我得到LoadComponent mount event和App true.

但随后它又回到了 suspense 回退，我又得到了 2000 毫秒，其中LoadComponent mount event和App true消息再次出现，看起来像是第二次渲染。我怎样才能避免这种情况？

function App() {
  const [fullLoadState, setfullLoadState] = useState(false);
  
  console.log("App " + fullLoadState)

  eventBus.on("FullyLoaded", (data) => setfullLoadState(true));

  return (
    <div>
      <Suspense fallback='Fallback'>
        <LoadComponent resource={delayHTML(2000)}/>
      </Suspense>
      <p>{fullLoadState ? null : "Site not fully loaded" }</p>
    </div>
  );
}

function LoadComponent({resource}){
  useEffect(()=> {
    console.log ('LoadComponent mount event')
    eventBus.dispatch("FullyLoaded", {messsage: 'some message'});
  })
  const html = resource.read();
  return html;
}

export default App;

EventBus 只是 EventListener。delayHTML 暂停，直到达到 2000 毫秒以返回文本值。

4

2 回答 2

1

根据 react 如何呈现其组件的方式，您可以创建一个变量，分配 delayHTML 并使用它。

例如，

const delayFunc = delayHTML(2000);
...
<LoadComponent resource={delayFunc}/>

这应该有效。

于 2020-08-11T11:00:03.867 回答
0

您可以尝试将您的 useEffect 更改为：

  useEffect(()=> {
    console.log ('LoadComponent mount event')
    eventBus.dispatch("FullyLoaded", {messsage: 'some message'});
  }, [])
于 2020-08-11T12:01:52.357 回答