#node.js #json #reactjs #map-function
#node.js #json #reactjs #map-функция
Вопрос:
У меня есть такой массив в файле данных React, и я использую .map()
метод для загрузки данных JSON в компоненте ProjectItem.js
.
Когда я набираю {console.log("title" projects[0].title)}
и регистрирую данные, на консоли появляется Projecttitle1. Как мне взять данные, отобразить эти данные в моем веб-приложении в самом функциональном компоненте? (Projecttitle1 для отображения в веб-приложении)
Data.json
{
"projects": [
{
"title": "Projecttitle1",
"category": "frontend development",
"description": "",
"desktop": [],
"mobile": []
}
]
}
ProjectItem.js
import React from 'react';
import './ProjectItem.scss';
import useWindowWidth from '../../Hooks/useWindowWidth.js';
import { projects } from '../../data'
import desktopImage from '../../Assets/Images/Projects/Desktop/123.jpg';
import mobileImage from '../../Assets/Images/Projects/Mobile/123_square.jpg'
const ProjectItem = ({ viewProject }) => {
const imageUrl = useWindowWidth() >= 650 ? desktopImage : mobileImage;
const { windowWidth } = useWindowWidth();
return(
<div className="projectItem" style={{ backgroundImage: `url(${ imageUrl })`}}>
{windowWidth >= 650 amp;amp;(
<>
<div className="title">
{projects.map((data, key)=>{
console.log(key);
return(
<div key={key}>
{data.title}
</div>
);
})}
</div>
<div className="viewProject">{viewProject}</div>
</>
)}
</div>
);
};
export default ProjectItem
Консоль:
Я пробовал несколько попыток импортировать файл json, а затем деконструировать из проанализированного json. Теперь, когда я запускаю npm, данные по-прежнему не печатаются в веб-приложении. Возможно ли это решение?
попытка 1:
import data from '../../data'
const { projects } =() => JSON.parse(data)
попытка 2:
import data from '../../data'
const {projects} =() => JSON.parse(JSON.stringify(data))
Ответ №1:
Вы пытаетесь деконструировать файл json, который в основном представляет собой строковое представление вашего объекта. вам нужно импортировать его, а затем деконструировать из проанализированного решения json для этого будет:
import data from '../../data'
const { windowWidth } = useWindowWidth();
const { projects } = JSON.parse(data)
return(
<div className="projectItem" style={{ backgroundImage: `url(${ imageUrl })`}}>
{windowWidth >= 650 amp;amp;(
<>
<div className="title">
{projects.map((data, key)=>{
console.log(key);
return(
<div key={key}>
{data.title}
</div>
);
})}
</div>
<div className="viewProject">{viewProject}</div>
</>
)}
</div>
);