状态改变时，React重新提供整个功能

编程问答 2022-08-22

问题描述

我正在看实现一个加载屏幕，该屏幕检查是否所有组件都已加载，但是遇到了这种奇怪的模式。使用下面的代码，我在控制台中启动App false，在delayHTML函数返回数据2000ms之后，我得到了LoadComponent mount event和App true。

但是随后又回到了暂停状态，我又得到了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会暂停直到到达2000ms才能返回文本值。

解决方法

基于react渲染其组件的方式，您可以创建一个变量，分配delayHTML并使用它。

例如，

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

这应该有效。

,

您可以尝试将useEffect更改为此吗？

  useEffect(()=> {
    console.log ('LoadComponent mount event')
    eventBus.dispatch("FullyLoaded",{messsage: 'some message'});
  },[])
react-suspensereactjsreactjsreactjsreactjs