Reactjs 键的基本用法-从数据列表中提取单项道具

在React中，我有一个项目数组，在本例中只有2个。每个项目都有：

钥匙 名称 信息 例如，我希望能够只渲染一个项目名称。我试过的每件事都给了我一个完整的清单。我对需要用于以下目的的格式感到困惑：

设置我的ID 告诉React我要呈现的特定ID 我尝试过创建不同的格式，尝试使用.map创建数字1和2

function ProjectList() {
  const projects = [
    {
      id: 0,
      name: "Shop",
      date: "2019",
      info: "info of 1",
    },
    {
      id: 1,
      name: "Hotel",
      date: "2019",
      info: "info of 2",
    },
  ]

  const findProjectInfo = projects.map (project =>(
    <div key={1}> 
      <h2 key={project.ID}>
        {project.info} 
      </h2>
    </div>
    ))

  return (
    <div>
      <div className='TRY NUMBER ONE' key={1}>
        {projects.map (project=> (
          <div key={project.ID}>
            <div> {project.name}</div>
            <div> {project.info}</div>
          </div> 
        ))}
      </div>

      <div className='TRY NUMBER TWO' key={1}>
        {findProjectInfo}
      </div>

    </div>
  )
}

export default ProjectList

---

我试过的每件事都给了我清单上的两项，而不是我想要的第一项

您只是在数组中进行迭代，这就是为什么要从数组中获取每个元素作为结果

您需要首先使用提供的ID筛选数组，然后使用map进行迭代

还要确保不要对多个元素重复该键

更新

根据所选项目ID更改状态并获取项目详细信息

。您要做的是查找一个特定元素，如下所示：

const project1 = findProjectInfo.find(project => project.id === 1);

这将返回单个对象而不是数组，然后可以渲染该数组：

<div>
  <div>{project.name}</div>
  <div>{project.info}</div>
</div> 

---

钥匙道具不得用于与此相关的任何东西。它是一种特殊的道具，有助于您了解组件何时更改，并且仅当您想渲染数组时（如使用.map时）或在一些更高级的情况下才需要它。

尝试类似的方法：

施工项目=[ { id:0， 名称:店铺,， 日期：2019年， 信息：1的信息， }, { id:1， 名称：酒店， 日期：2019年， 信息：2的信息， }, ]; 功能项目列表{ const[selectedProject，setSelectedProject]=React.useState0； 回来 选择项目 setSelectedProject0}>项目1 setSelectedProject1}>Project2 项目名称：{projects[selectedProject].name} 项目日期：{projects[selectedProject].date} 项目信息：{projects[selectedProject].info} ; } ReactDOM.render，document.getElementById'root'；

---

为什么您认为map返回的数组会比开始时更短？你想用循环外的key=做什么？为什么？由于缺乏知识和普遍理解，我会说：我想[关键点]不是解决我问题的正确方法，正如里卡多在下面所说。stackoverflow上发布的第一个问题，在5分钟内成倍增加了答案。非常感谢你。问题现已解决。Ravibagul，您是否介意更详细地解释如何将useState从0更改为1，以及如何实际更改或设置提供的ID？我在这里的最终目标是能够在其他组件中选择并显示此列表的不同部分。@Raizorbak更新了我的答案，请看一看。stackoverflow上发布的第一个问题，在5分钟内将答案成倍增加。非常感谢你。问题现已解决。第一个问题张贴在stackoverflow上，在5分钟内成倍增加答案。非常感谢你。问题现在解决了，不客气！您可以将其中一个标记为正确，并对您发现有帮助的项目进行投票！

const project1 = findProjectInfo.find(project => project.id === 1);

<div>
  <div>{project.name}</div>
  <div>{project.info}</div>
</div>