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

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

请查看指向图像的链接，我要如何设置文本和图像flex image-text

的样式

我还必须指定该元素的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>
   }

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

1 个答案: