React Js axios 在实际数据之前返回空 div答案

【问题标题】：React Js axios returns empty div before actual dataReact Js axios 在实际数据之前返回空 div
【发布时间】：2020-08-15 14:12:47
【问题描述】：

我正在开发一个简单的应用程序，应该将来自 JSON 的信息添加到页面上。我能够使用 Axios 从本地 JSON 文件中获取数据并显示它。问题是应用程序首先呈现一个空数组（所选数据），然后才是实际数据本身。

本地json文件：

{
    "home": [

{
            "id": "app",
            "management": [
                {
                    "id": "image",
                    "alt": "truck",
                    "img": "./img/assets/img.png",
                    "img2": "./img/assets/img2.png",
                    "img3": "./img/assets/img3.png"
                },
                {
                    "id": "services",
                    "title": "Managementt",
                    "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
                     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
                     nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis 
                     aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat 
                     nulla pariatur."
                }
            ]
        }

]

我从本地 JSON 获取数据的代码是：

const [services, setServices] = useState([]);

    const getServices = async () => {
        const response =  await axios.get("./home.json");
        setServices(response.data.home[2].management);
        console.log(response);
    };
    useEffect(() => {
        getServices();
    }, []);

然后使用此代码显示：

return (
        <>
            <Layout>
                {services.map(({
                        img,
                        img2,
                        img3,
                        id,
                        title,
                        text,
                    }) => (
                        <>
                            <div className={styles.flex}>
                            {id === "image" ? (

                                        <img
                                            id={id}
                                            className={styles.logo}
                                            srcSet={`${img2} 2x,
                                        ${img3} 3x`}
                                            alt={alt}
                                            src={img}
                                        />
                                    ) : null}
                                </div>
                                <div>
                                    {id === "services" ? (
                                        <div className={styles.services} key={id}>
                                            <div style={{ display: "flex" }}>
                                                <h1 className={styles.text}>{title}</h1>
                                            <p>{text}</p>
                                        </div>
                                    ) : null}
                                </div>
                            </div>
                        </>
                    )
                )}


            </Layout>
        </>

在实际的图像/文本显示之前，应用程序会渲染一个空的 div，可以在 console.log 中看到（具有与渲染数据相同的类名和参数，例如，如果文本的 div 的宽度为400px，在图像旁边还有一个空的 div，宽度也为 400px），它弄乱了所有样式。我想将图像和文本显示为 flex（在页面上彼此相邻），但是当我使用 display flex 时，文本的空数组首先显示并占用图像附近的空间，实际文本显示在图像下方。

请查看图片链接我想如何设置文字和图片的样式flex image-text

我还必须指定元素的id，否则json文件中的所有图像都会被渲染。

任何建议将不胜感激。谢谢

【问题讨论】：

useEffect 在第一次渲染完成后运行，因此您必须检查渲染方法，例如获取数据然后渲染实际内容，否则您可以在获取数据时显示加载组件跨度>
您好，我不确定您的意思。我可以渲染实际数据，但问题是数据反应之前的数据渲染并添加为空 div 空数组。

标签： json reactjs axios fetch react-hooks

【解决方案1】：

您必须在呈现数据之前检查是否存在这样的数据

if(services.length>0)
{
return (
    <>
        <Layout>
            {services.map(({
                    img,
                    img2,
                    img3,
                    id,
                    title,
                    text,
                }) => (
                    <>
                        <div className={styles.flex}>
                        {id === "image" ? (

                                    <img
                                        id={id}
                                        className={styles.logo}
                                        srcSet={`${img2} 2x,
                                    ${img3} 3x`}
                                        alt={alt}
                                        src={img}
                                    />
                                ) : null}
                            </div>
                            <div>
                                {id === "services" ? (
                                    <div className={styles.services} key={id}>
                                        <div style={{ display: "flex" }}>
                                            <h1 className={styles.text}>{title}</h1>
                                        <p>{text}</p>
                                    </div>
                                ) : null}
                            </div>
                        </div>
                    </>
                )
            )}


        </Layout>
    </>
    }
   else{
   return <div> Loading...</div>
   }

【讨论】：