如何在 React 组件中将 JSON 数据从控制台打印到网页答案

【问题标题】：How to print JSON data from console to webpage in React component如何在 React 组件中将 JSON 数据从控制台打印到网页
【发布时间】：2021-02-02 15:26:18
【问题描述】：

我在 React 数据文件中有一个这样的数组，我正在使用 .map() 方法在组件 ProjectItem.js 中加载 JSON 数据。

当我输入 {console.log("title" + projects[0].title)} 并且日志数据 Projecttitle1 出现在控制台上时。我应该如何获取数据，在我的网络应用程序本身的功能组件中呈现该数据？（Projecttitle1 显示在 web-app 上）

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 时，数据仍然没有在 web-app 上打印。有可能解决这个问题吗？

尝试1：

import data from '../../data'

const { projects } =() => JSON.parse(data)

尝试2：

import data from '../../data'
const {projects} =() => JSON.parse(JSON.stringify(data))

【问题讨论】：

标签： node.js json reactjs map-function

【解决方案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 &&( 
        <>
        <div className="title">
            {projects.map((data, key)=>{
                    console.log(key);
                return(
                    <div key={key}>
                    {data.title}
                    </div>
                );
            })} 
        </div>
        <div className="viewProject">{viewProject}</div>
        </>
    )}  
</div>
);

【讨论】：