“反应”列表中的每个孩子都应该有一个唯一的“关键”道具答案

【问题标题】："react" Each child in a list should have a unique "key" prop“反应”列表中的每个孩子都应该有一个唯一的“关键”道具
【发布时间】：2021-11-18 18:18:51
【问题描述】：

map函数中没有输入key值好像出错了，但是不知道怎么修改代码。

数组的结构如下：

    const tabContArr=[
        {
            tabTitle:(
                <span className={activeIndex===0 ? "is-active" : ""} onClick={()=>tabClickHandler(0)}>0</span>
            ),
         
        },
        {
            tabTitle:(
                <span className={activeIndex===1 ? "is-active" : ""} onClick={()=>tabClickHandler(1)}>1</span>
            ),
           
        },
        {
            tabTitle:(
                <span className={activeIndex===2 ? "is-active" : ""} onClick={()=>tabClickHandler(2)}>2</span>
            ),
          
        },
        {
            tabTitle:(
                <span className={activeIndex===3 ? "is-active" : ""} onClick={()=>tabClickHandler(3)}>3</span>
            ),
           
        }
    ];

map函数部分出错。

   {tabContArr.map((section)=>{
                return section.tabTitle
            })}

【问题讨论】：

如果您将 key-prop 添加到这些跨度，它可能会起作用。就像
这看起来不是解决问题的一种非常有效的方法。除了您传递给函数的参数之外，您的所有跨度都是相同的。
robinpokorny.com/blog/index-as-a-key-is-an-anti-pattern

标签： javascript reactjs react-key-index

【解决方案1】：

尝试使用React Fragments 和key 属性，如React docs 中所述

{tabContArr.map((section, index)=>{
    return <React.Fragment key={`section-tab-${index}`}>{section.tabTitle}</React.Fragment>
 })}

【讨论】：

【解决方案2】：

你所做的不是正确的方法。如果你有数据，而不是将 ReactElement 传递给数组，你应该像这样将它传递给 map 函数：

{tabContArr.map((tab, index)=>{
      return <span 
         className={activeIndex === index ? "is-active" : ""} 
         onClick={()=>tabClickHandler(index)} 
         key={`tab-${index}`}>index</span>
})}

【讨论】：

您不应该使用索引作为键，它可能会导致问题并引发控制台错误。您应该使用某种唯一 ID 或不会在地图中重复的东西。
但是如果列表不会被更新、重新排序并且是静态的并且您没有项目 ID，那么使用键作为索引是可以的。