如何在React组件中使用数组映射JSON数据
如何在React组件中使用数组映射JSON数据
提问于 2020-09-30 18:35:41
在React数据文件中有这样一个数组，我使用.map()方法在组件ProjectItem.js中加载JSON数据。
问题1:解决了，什么是找出我的代码是否包含一个值的最有效的方法？{data.title}目前还没有显示在我的页面上。我试过根据文档应用一些代码，请看一看并帮助我。
*问题2:打印嵌套JSON对象的最有效方法是什么？现在我想在projects数组中打印标题，这样我就可以调试它了。显示在浏览器上。我在检查器中看不到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控制台：
空的
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-09-30 18:40:07
可以使用数组的length属性来确定数组是否为空。
const emptyArray = [];
const notEmptyArray = [1,2,3];
console.log(!emptyArray.length); // => true;
console.log(!notEmptyArray.length); // => false;Stack Overflow用户
发布于 2020-09-30 18:38:52
您可以使用Array.prototype.includes()来检查元素是否在数组中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64143772
复制相关文章
相似问题
腾讯云开发者
