React Js ax ios возвращает пустой div перед фактическими данными

Question

Я работаю над простым приложением, где на странице должна быть добавлена ​​информация от JSON. Мне удалось извлечь данные из локального файла JSON, используя Ax ios, и отобразить его. Проблема в том, что приложение сначала отображает пустой массив (из выбранных данных), и только после этого сами фактические данные.

локальный 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, рядом с изображением также есть пустой div с шириной 400px), и он испортил все стили. Я хочу отобразить изображение и текст как flex (рядом друг с другом на странице), но когда я использую display flex, сначала отображается пустой массив текста, который занимает место рядом с изображением, а фактический текст отображается под изображением.

Пожалуйста, смотрите ссылку на изображение, как я хочу стилизовать текст и изображение flex image-text

Я также должен указать идентификатор элемента, в противном случае все изображения из файла 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>
   }