Question

我正在尝试制作一个具有不同图像的网格，当时的想法是它会在对象之间循环并形成网格，但是根本无法正常工作。

这些是对象：

export const Projects = [
  {
    id: 1,
    name: 'Site 1',
    tech: [
      'HTML',
      'CSS',
      'SASS',
      'React'
    ],
    description: 'Lorem',
    image: './assets/cv.svg'
  },
  {
    id: 1,
    name: 'Site 2',
    tech: [
      'HTML',
      'CSS',
      'SASS',
      'React'
    ],
    description: 'Lorem',
    image: './assets/cv.svg'
  },
  {
    id: 1,
    name: 'Site 3',
    tech: [
      'HTML',
      'CSS',
      'SASS',
      'React'
    ],
    description: 'Lorem',
    image: './assets/cv.svg'
  }
];

export default Projects;

这是我最努力地遍历对象的地方

import React, {Component} from "react"
import './Main.scss';
import Projects from '../Projects';
import Item from './Item';

 const Portfolio = ({ Projects }) => {
   const portfolioItem = Projects.map(i => {
     return <Item
     image={Projects[i].image}/>
   })
   return (
     <div>
     {portfolioItem}
     </div>
   )
 }


export default Portfolio;

我正在尝试在此处创建单个项目组件，然后将其用于上一个

import React from 'react';

const Item = ({ image }) => {
  return (
    <div>
      <img src={image} />
    </div>
  )
}

export default Item;

Answer 1

问题似乎出在地图功能上。

尝试：

const Portfolio = () => {
  const portfolioItem = Projects.map((project, i) => {
    return <Item
    key={i}
    image={project.image}/>
  })
  return (
    <div>
      {portfolioItem}
    </div>
 )
}

我可以看到的问题是：

1：导入静态数据Projects，无需放置静态数据进入函数的props，因为它来自于自己的函数文件。最终，如果您要从API获取该信息调用，您可能需要通过道具将数据发送到该组件。

2：在Projects.map()的行中，您试图访问Projects的索引，但是map函数的工作方式略有不同。第一个参数是迭代对象，第二个参数是索引。

3：最后一部分是添加密钥道具，因为React会发出有关在迭代项上没有唯一密钥的警告。它们都需要一个唯一的密钥，因此React可以根据您迭代项目的功能来确定应该更新哪些子代。

无法弄清楚如何在React中遍历对象

1 个答案: