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

Question

好像是因为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>
            ),
           
        }
    ];

地图功能部分出现错误。

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

Answer 1

尝试使用具有React 文档中提到的属性的React Fragmentskey

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

Answer 2

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

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