React跨组件映射对象数组遇key警告及参数错误问题求助

1. 初始警告原因：列表项缺少唯一key属性 #

React要求列表中每个子元素必须有唯一的key prop，用来帮助React识别元素的变化、添加或移除操作。你的代码里有两处映射都未添加key：

• 外层mainDetails.map渲染的每个<div className="card">
• 内层detail.list.map渲染的每个<li>

2. 添加key时出错的原因 #

你写的代码detail.list.map(listItems, i =>(<li key={i}>{listItems}</li>))存在语法错误：箭头函数有多个参数时，必须用括号包裹参数。你漏掉了括号，导致参数顺序混乱，listItems实际接收的是数组的索引而非列表项内容，因此出现listItems is undefined的错误。

3. 修正后的完整代码 #

import React from 'react'
import Link from 'next/link'
import {mainDetails} from './Menus'

const Heading2 = () => {
  return (
    <main>
      {/* 外层映射：用唯一的heading作为key，比索引更可靠 */}
      {mainDetails.map(detail => (
        <div className="card" key={detail.heading}>  
          <div className='done'>
            <div>
              <h5 className='font-normal pl-8 text-[#E54416] pb-4 text-lg'>{detail.heading}</h5>
              <ul>
                {/* 内层映射：用索引i作为key，因列表项内容重复，索引是可选方案 */}
                {detail.list.map((listItems, i) =>(
                  <li key={i}>{listItems}</li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      ))}
    </main>
  )
}

export default Heading2

补充说明 #

• 外层选择detail.heading作为key，是因为每个heading都是唯一的，符合React官方推荐的「优先使用稳定唯一标识而非索引」的原则。
• 内层列表项因内容重复，用索引i作为key是可行的；如果后续有列表项增删操作，建议给每个列表项添加独立唯一ID，避免索引带来的渲染异常。

内容的提问来源于stack exchange，提问作者Chidimma Nworah