如何在数组 React 组件中使用地图打印 JSON 数据

Question

我在 React 数据文件中有一个这样的数组，我正在使用该.map()方法在组件中加载 JSON 数据ProjectItem.js。打印嵌套 JSON 对象的最有效方法是什么？我现在想在项目数组中打印标题，以便我可以调试它，在浏览器上显示它。我在检查员中看不到<div className="title"></div>，正确的功能是什么？数据.json{"projects": [    {        "title": "Projecttitle1",        "category": "frontend development",        "description": "",        "desktop": [],        "mobile": []    }  ]}ProjectItem.jsimport 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: []

    }

  ]

};

projects所以当你映射这个对象时，你需要像这样引用属性data.projects.map()。

例子：

数据.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>

  );

}