Как распечатать данные JSON с консоли на веб-страницу в компоненте React

У меня есть такой массив в файле данных 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 &&( 
            <>
            <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))

reactjs node.js json map-function
person inhyechoi    schedule 19.10.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы пытаетесь выполнить деконструкцию из файла json, который в основном представляет собой строковое представление вашего объекта. вам нужно импортировать его, а затем деконструировать из проанализированного json-решения, так как это будет:

import data  from '../../data'
const { windowWidth } = useWindowWidth();
const { projects } = JSON.parse(data)
return(
<div className="projectItem" style={{ backgroundImage: `url(${ imageUrl })`}}>
    {windowWidth >= 650 &&( 
        <>
        <div className="title">
            {projects.map((data, key)=>{
                    console.log(key);
                return(
                    <div key={key}>
                    {data.title}
                    </div>
                );
            })} 
        </div>
        <div className="viewProject">{viewProject}</div>
        </>
    )}  
</div>
);
person Yakir Fitousi    schedule 19.10.2020