我想在我的網頁上顯示帶有影像和文本的專案資料。我創建了一個 ProjectList 組件，通過將資料的每個部分映射到其所需的顯示位置，我將在其中以一種可呈現的方式構建它。但是，我的網頁上顯示“未定義”。我有一個螢屏截圖要顯示。
嘗試的方法：
- 更改
{`${name}`}為{name}===> 不顯示任何內容。它是空的。 - 變化
<img src={picture} alt={name} />到<img src={`${picture}`} alt={name} />===>與上述相同的
這是我的專案組件：
import "./Project.scss"
import ProjectList from "./ProjectList/ProjectList"
import { projectdata } from "./ProjectData.js"
export default function Project() {
return (
<div className='project' id='project'>
<h1>Project</h1>
<ul>
{projectdata.map(() => (
<ProjectList />
))}
</ul>
</div>
)
}
這是我的專案串列組件：
import "./ProjectList.scss"
import HorizontalRuleIcon from '@mui/icons-material/HorizontalRule';
export default function ProjectList({ name, picture, description, tech, url, source }) {
return (
<li className="projectlist">
<div className="container">
<div className="image">
<img src={picture} alt={name} />
</div>
<h2>{`${name}`}
{console.log(name)} </h2>
<HorizontalRuleIcon className='horizontalrule'></HorizontalRuleIcon>
<span>{`${description}`}</span>
</div>
</li>
)
}
這是我在 js 中的一些示例資料：
export const projectdata = [
{
id: 'Featured',
title: 'Featured',
name: 'LaoSpicy',
picture: 'assets/images/tenor.png',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
tech: [""],
url: '',
GitHub: "",
},
uj5u.com熱心網友回復：
原因
您需要傳遞projectData Item給每個ProjectList組件。
...-> 擴展運算子，如果您使用的屬性PrrojectList與您正在擴展的物件的屬性相同，則屬性將自動映射，否則您必須單獨進行。key-> 做地圖時需要。您可以使用索引作為鍵。這有助于應對管理rerendersimport "./Project.scss" import ProjectList from "./ProjectList/ProjectList" import { projectdata } from "./ProjectData.js"
export default function Project() { return ( <div className='project' id='project'> <h1>Project</h1> <ul> {projectdata.map((project, index) => ( <ProjectList {...project} key={index} /> ))} </ul> </div> ) }
uj5u.com熱心網友回復：
您沒有將您ProjectList希望它顯示的資料交給您的組件。我認為你想要這個：
{projectdata.map(project => <ProjectList {...project} />)}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/370888.html
標籤：javascript 反应
上一篇：無法洗掉帖子的評論？