[英]"react" Each child in a list should have a unique "key" prop
An error seems to occur because the key value is not entered in the map function, but I do not know how to modify the code.好像是因为map function中没有输入key值出现错误,但是不知道怎么修改代码。
The array is structured like this:数组的结构如下:
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>
),
}
];
An error occurs in the map function part. map function 部分出现错误。
{tabContArr.map((section)=>{
return section.tabTitle
})}
What you have done is not the right way.你所做的不是正确的方法。 If you have data, instead of passing the ReactElement into the array you should pass it into the map function like this:
如果您有数据,而不是将 ReactElement 传递到数组中,您应该将其传递到 map function 中,如下所示:
{tabContArr.map((tab, index)=>{
return <span
className={activeIndex === index ? "is-active" : ""}
onClick={()=>tabClickHandler(index)}
key={`tab-${index}`}>index</span>
})}
Try with React Fragments with a key
attribute as mentioned in React docs尝试使用React 文档中提到的具有
key
属性的React Fragments
{tabContArr.map((section, index)=>{
return <React.Fragment key={`section-tab-${index}`}>{section.tabTitle}</React.Fragment>
})}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.