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

Question

我正在做一个简单的应用程序，其中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>
        </>

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

请看我的图片链接，我想让文字和图片的样式是怎样的。挠图-文字

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

如果有任何建议，我将非常感激。谢谢你的建议

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