Я работаю над простым приложением, где на странице должна быть добавлена информация от 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 будут обработаны.
Любые предложения будут высоко оценены. Спасибо