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

木头没有瓜

于 2023-09-06 22:47:03 发布

阅读量1.4k

点赞数

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_40918145/article/details/132725133

版权

react 专栏收录该内容

8 篇文章

订阅专栏

文章讲述了开发者在React项目中遇到的一个关于jsx中map函数使用key属性的错误，尽管已经在其他地方正确设置了key，但在Modal的footer部分的第一个元素上仍然报错。作者发现这是因为在数组的第一个元素上需要特别添加key，通过单元测试验证了这一问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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