时间戳

首页 > 解决方案 > React Js axios 在实际数据之前返回空 div

json - React Js axios 在实际数据之前返回空 div

问题描述

我正在开发一个简单的应用程序，应该在页面上添加来自 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 中看到（具有与渲染数据相同的 className 和参数，例如，如果文本的 div 的宽度为 400px，则下一步对于图像，还有一个宽度为 400px 的空 div）并且它弄乱了所有样式。我想将图像和文本显示为 flex（在页面上彼此相邻），但是当我使用 display flex 时，文本的空数组首先显示并占用图像附近的空间，实际文本显示在图像下方。

请查看图像的链接我想如何设置文本样式和图像flex 图像文本

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

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

标签： jsonreactjsaxiosfetchreact-hooks

解决方案

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

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>
   }

推荐阅读