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