Блог

Я хотел бы показать данные своего проекта с изображениями и текстами на своей веб-странице. Я создал компонент ProjectList, в котором я собираюсь структурировать его презентабельным образом, сопоставляя каждую часть данных с желаемым местоположением отображения. Тем не менее, я получаю «неопределенное» на своей веб-странице. Мне нужно показать скриншот.

Испробованные методы:

1. изменение {`${name}`} на {name} ===gt; ничего не показывает. там пусто.
2. измените lt;img src={picture} alt={name} /gt; на lt;img src={`${picture}`} alt={name} /gt; ===gt; то же, что и выше

Вот мой компонент проекта:

 import "./Project.scss" import ProjectList from "./ProjectList/ProjectList" import { projectdata } from "./ProjectData.js"  export default function Project() {  return (  lt;div className='project' id='project'gt;  lt;h1gt;Projectlt;/h1gt;  lt;ulgt;  {projectdata.map(() =gt; (  lt;ProjectList /gt;  ))}  lt;/ulgt;  lt;/divgt;  ) }  

Вот мой компонент списка проектов:

 import "./ProjectList.scss" import HorizontalRuleIcon from '@mui/icons-material/HorizontalRule';  export default function ProjectList({ name, picture, description, tech, url, source }) {  return (  lt;li className="projectlist"gt;  lt;div className="container"gt;  lt;div className="image"gt;  lt;img src={picture} alt={name} /gt;  lt;/divgt;  lt;h2gt;{`${name}`}  {console.log(name)} lt;/h2gt;  lt;HorizontalRuleIcon className='horizontalrule'gt;lt;/HorizontalRuleIcongt;  lt;spangt;{`${description}`}lt;/spangt;  lt;/divgt;  lt;/ligt;   ) }  

Вот некоторые из моих примеров данных в 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: "",  },  

Причина

Вам нужно перейти projectData Item к каждому ProjectList компоненту.

• ... -gt; оператор распространения, если свойства u используются в gt; PrrojectList так же, как и у объекта, который распространяется, то свойства автоматически отображаются, в противном случае вам придется делать это индивидуально.
• key -gt; требуется при создании карты. Вы можете использовать индекс в качестве ключа. Это помогает реагировать на управление rerenders

  импорт «./Project.scss» импорт списка проектов из «./Список проектов/Список проектов» импорт { данные проекта } из «./ProjectData.js»

   export default function Project() {  return (  lt;div className='project' id='project'gt;  lt;h1gt;Projectlt;/h1gt;  lt;ulgt;  {projectdata.map((project, index) =gt; (  lt;ProjectList {...project} key={index} /gt;   ))}  lt;/ulgt;  lt;/divgt;  )  }  

Вы не передаете своему ProjectList компоненту данные, которые хотите, чтобы он отображался. Я думаю, что ты хочешь этого вместо этого:

 {projectdata.map(project =gt; lt;ProjectList {...project} /gt;)}