react遇到一个奇怪的问题
error Missing "key" prop for element in array react/jsx-key
检查了jsx中使用map的,都定义了key
<div className="docTypeListBox">
{otherList.map((item: any) => {
return (
<DocItem
key={item.document_id}
item={item}
showDemo={showDemo}
tabName={tabName}
type="otherDoc"
showTopClick={showTopClick}
/>
);
})}
</div>
但还是报错,代码提交eslint一直提示
最终,通过单元代码测试,发现是这货
<Modal
centered
className="demoModal"
title={currentDemo.example_title}
open={isDemoOpen}
onCancel={demoModalCancel}
width={650}
footer={[
<div className="flex-acen-sb">
<div className="flex-aitem-center">
<div className="rate-circle f-s-14"></div>
<div className="m-l-10">NO.{docNo}</div>
</div>
<div>
<Tooltip
placement="top"
title={documentType === 'otherDoc' ? '置顶外展示' : '外展示'}
arrow={true}
className={`card-more ${documentType === 'otherDoc' ? 'cursor-point' : ''}`}
>
{documentType === 'otherDoc' ? (
<div onClick={() => showTopClick(currentArticle)}>
<img src={topdisplay} height={15} width={15} />
</div>
) : (
<div>
<img src={outdisplay} height={15} width={15} />
</div>
)}
</Tooltip>
</div>
</div>,
]}
>
因为使用了数组,数组的第一个元素要用key
// 注意看key="meishayong"
<Modal
centered
className="demoModal"
title={currentDemo.example_title}
open={isDemoOpen}
onCancel={demoModalCancel}
width={650}
footer={[
<div className="flex-acen-sb" key="meishayong">
<div className="flex-aitem-center">
<div className="rate-circle f-s-14"></div>
<div className="m-l-10">NO.{docNo}</div>
</div>
<div>
<Tooltip
placement="top"
title={documentType === 'otherDoc' ? '置顶外展示' : '外展示'}
arrow={true}
className={`card-more ${documentType === 'otherDoc' ? 'cursor-point' : ''}`}
>
{documentType === 'otherDoc' ? (
<div onClick={() => showTopClick(currentArticle)}>
<img src={topdisplay} height={15} width={15} />
</div>
) : (
<div>
<img src={outdisplay} height={15} width={15} />
</div>
)}
</Tooltip>
</div>
</div>,
]}
>