如何在 React 组件中将 JSON 数据映射到数组答案

【问题标题】：How to map JSON data with array in React component如何在 React 组件中将 JSON 数据映射到数组
【发布时间】：2021-01-16 11:47:25
【问题描述】：

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

问题 1：已解决 找出我的代码是否包含值的最有效方法是什么？ '{data.title} 目前没有显示在我的页面上。我已经尝试按照文档应用一些代码，请查看并帮助我。

*问题 2： 打印嵌套 JSON 对象最有效的方法是什么？我现在想在项目数组中打印标题，以便调试它。在浏览器上显示。我在检查器中看不到 console.log(key) 没有显示在控制台上（函数出了点问题）。

Data.json

{
"projects": [
    {
        "title": "Projecttitle",
        "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

控制台：

空

【问题讨论】：

什么值？有什么价值吗？ projects.length > 0?

标签： node.js arrays json reactjs

【解决方案1】：

可以使用数组的length属性判断数组是否为空。

const emptyArray = [];
const notEmptyArray = [1,2,3];

console.log(!emptyArray.length); // => true;
console.log(!notEmptyArray.length); // => false;

【讨论】：

【解决方案2】：

您可以使用Array.prototype.includes() 来检查元素是否在数组中。

【讨论】：