亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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

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

狐的傳說 2023-04-14 15:06:56
我在 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安慰:空的
查看完整描述

1 回答

?
德瑪西亞99

TA貢獻1770條經驗 獲得超3個贊

我假設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>

? );

}


查看完整回答
反對 回復 2023-04-14
  • 1 回答
  • 0 關注
  • 135 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號