如何在 React 组件中使用数组映射 JSON 数据

Question

I have an array like this in React data file and I'm using the .map() method to load JSON data in component ProjectItem.js .

question 1: solved What is the most efficient way to find out if my code contains a value? '{data.title} isn't showing on my page at the moment. I've tried on applying some code as per document please have a look and help me.

* question 2: What is the most efficient way to print nested JSON object? I now want to print the title in projects array so I can debug it. show on browser. I can't see in inspector console.log(key) isn't showing on console (something is going wrong with the function).

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

Console:

empty

Answer 1

You can use the length property of the array to determine if the array is empty or not.

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

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

Answer 2

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