使用 Map 函数时如何在 React JSX 中定义键答案

【问题标题】：How to define keys in React JSX when use Map function使用 Map 函数时如何在 React JSX 中定义键
【发布时间】：2023-02-26 13:51:31
【问题描述】：

我有对象数组，需要遍历它并将其显示在 DOM 中。我可以用地图功能做到这一点。但是由于没有为它提供唯一的密钥，我得到了错误。请记住，它不是使用组件来循环。我只是想让 JSX 循环遍历它。那么我们如何在其中提供密钥。代码如下。提前致谢！

import React from 'react';
import {Component1, Component2} from './Component';

const data=[
  {
    title: "Sample Title One",
    description: "Sample Description One"
  },{
    title: "Sample Title Two",
    description: "Sample Description Two"
  }]

function App(){
  return(
    <div className="data">
      {data.map((item)=>{
        return <div className="wrapper">
          <div className="title">{item.title}</div>
          <div className="description">{item.description}</div>
        </div> 
      })}
    </div>
  )
}
export default App;

我尝试了以下 <div className="wrapper" keys={item.title}>

【问题讨论】：

标签： reactjs loops key jsx web-component

【解决方案1】：

我觉得是<div className="wrapper" key={item.title}>

【讨论】：