"react" 列表中的每个 child 都应该有一个唯一的 "key" 道具

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>
            ),
           
        }
    ];

map功能部分出错

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

Answer 1

你的做法不对。如果你有数据，而不是将 ReactElement 传递到数组中，你应该像这样将它传递到 map 函数中：

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

Answer 2

试试 React Fragments with a key attribute as mentioned in React docs

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

"react" 列表中的每个 child 都应该有一个唯一的 "key" 道具

"react" Each child in a list should have a unique "key" prop

javascript

reactjs

react-key-index