如何使用數組 React 組件中的地圖打印 JSON 數據

Question

我在 React 數據文件中有一個這樣的數組，我正在使用.map()方法在組件ProjectItem.js加載 JSON 數據。

打印嵌套 JSON 對象的最有效方法是什么？ 我現在想在項目數組中打印標題，以便我可以調試它，在瀏覽器上顯示它。 我在檢查器中看不到<div className="title"></div> ，正確的功能是什么？

數據.json

{
"projects": [
    {
        "title": "Projecttitle1",
        "category": "frontend development",
        "description": "",
        "desktop": [],
        "mobile": []
    }
  ]
}

項目項目.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

安慰：

空的

Answer 1

我假設import { projects } from '../../data'是這樣的：

export const data = {
  projects: [
    {
      title: "Project title 1",
      category: "frontend development",
      description: "",
      desktop: [],
      mobile: []
    }
  ]
};

因此，當您映射此對象時，您需要像data.projects.map()一樣引用projects屬性。

例子：

數據.js

export const data = {
  projects: [
    {
      title: "Project title 1",
      category: "frontend development",
      description: "",
      desktop: [],
      mobile: []
    },
    {
      title: "Project title 2",
      category: "frontend development",
      description: "",
      desktop: [],
      mobile: []
    }
  ]
};

應用程序.js

import React from "react";

import { data } from "./data";

export default function App() {
  return (
    <div>
      {data.projects.map((project, key) => {
        return <p key={key}>{project.title}</p>;
      })}
    </div>
  );
}

我也創建了代碼沙盒。