Reactjs Can'；我不知道如何在React中循环对象

我正在尝试用不同的图像制作一个网格，其想法是它将在对象之间循环并生成网格，但它根本不起作用

这些是对象：

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，{Component}来自“React”
导入“/Main.scss”；
从“../Projects”导入项目；
从“./Item”导入项目；
const公文包=（{Projects}）=>{
const portfolioItem=Projects.map（i=>{
返回
})
返回(
{portfolioItem}
)
}
出口违约组合；

我试图在这里创建一个单独的项目组件，然后在前面的一个组件中使用它

import React from 'react';

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

export default Item;

从“React”导入React；
常量项=（{image}）=>{
返回(
)
}
导出默认项；

问题似乎出在map函数中

尝试：

const公文包=（）=>{
const portfolioItem=Projects.map（（project，i）=>{
返回
})
返回(
{portfolioItem}
)
}

我看到的问题是：

1：导入静态数据

项目

，无需放置 进入函数的

道具

，因为它来自函数本身 文件最终，如果您是从API获得这些信息的 调用时，您可能需要通过道具将数据发送到该组件

2:在

Projects.map（）

行中，您试图访问项目索引，但是

map

函数的工作方式有点不同。第一个参数是迭代对象，第二个参数是索引

---

3：最后一部分添加了key prop，因为React将抛出一个关于在迭代项上没有唯一键的警告。它们都需要一个唯一的键，以便React可以根据迭代项的功能确定哪些子项应该更新。

您的问题是什么？“它根本不起作用”是什么意思？您可以尝试的第一件事是在

项

组件中添加另一个元素，以查看

.map

是否按您所希望的方式工作。这似乎对我有效，有些问题仍然有效，我将尝试自己解决，但现在循环似乎正常。你能帮我理解一下，我的代码有什么问题，为什么不能正常工作？非常感谢！补充了一点解释。希望这是有道理的。

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