在反应中，只有在所有数据可用后才显示组件？

Posted 2023-03-05

【中文标题】在反应中，只有在所有数据可用后才显示组件？

【英文标题】：In react, how to display component only after all data is available?

【发布时间】：2022-01-10 16:43:32

【问题描述】：

我有一个显示图像的组件。该组件还有一个菜单栏。

在最初的服务器请求期间，该组件始终显示菜单栏一瞬间，因为实际图像尚未加载。

如何在图片准备好后才显示菜单栏？

已编辑：

我可以确定图像的 URL 何时加载并可用。但是如何判断实际图像本身是否准备就绪？

【问题讨论】：

如果您共享一些代码，我可以更准确地回答，但是假设您有一个称为图像的状态，您从 api 获取图像后存储图像。在您的主要返回语句之前，您可以使用 if 并在未加载图像时返回加载指示符。

图片源是本地磁盘还是其他的问题请多加点，分享一个代码sn-p其实很有帮助，胡乱猜测我觉得你需要实现的条件渲染仅当图像可用时才使用组件，以防您从远程源获取它。从本地磁盘有时需要几毫秒，具体取决于图像格式的大小。

【参考方案1】：

您可以使用部分渲染 例如

import React,  useEffect, useState  from 'react';

    function App() 
    
    
      const [data, setData] = useState(null);
    
      useEffect(()=>
        setData(true);
      , []);
    
      return (
        <div>
          data && <div> after data is not null this will be visible</div>
        </div>
      );
    
    export default App;

【参考方案2】：

您可以设置如下状态并根据该值加载菜单；

const [ImageLoaded, setImageLoaded] = useState(false);

【参考方案3】：

你可以这样做：

function YourComponent () 
    
    const [imgLoaded, setImgLoaded] = useState(false);
   
    const handleImgLoad = () => 
        setImgLoaded(true);
    

    return(
        <>
            <img onLoad=handleImgLoad src="..."  />
            imgLoaded ? <MenuBar /> : <></>
        </>
    );