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

Question

好像是因为map function中没有输入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 function 部分出现错误。

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

Answer 1

你所做的不是正确的方法。 如果您有数据，而不是将 ReactElement 传递到数组中，您应该将其传递到 map function 中，如下所示：

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

Answer 2

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

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