error Missing “key“ prop for element in array react/jsx-key

木头没有瓜2023-09-13 16:45

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