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

2023-11-20

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

error Missing “key“ prop for element in array react/jsx-key 的相关文章

  • JavaScript 为什么操作 __proto__ 很慢? [复制]

    这个问题在这里已经有答案了 与此线程相关 JavaScript 修改函数原型的更好方法 https stackoverflow com questions 21788187 javascript better way to modify f
  • 如何从模板脚本访问 AngularJS 变量

    我的控制器 scope totals totals 我的模板 按 html 注入的预期工作 totals 但我需要的是访问变量totals在模板的脚本中 如下所示 我试过了 scope totals totals totals 等 均无济于
  • 如何在 Angular 2 中禁用浏览器后退按钮

    我正在使用 Angular 2 开发一个网站 有没有办法使用 Angular 2 禁用或触发浏览器后退按钮 Thanks 不确定这是否已经排序 但仍然发布答案 以供将来参考 为了解决这个问题 您基本上需要在应用程序组件中添加一个侦听器并设置
  • JS中的递归排序

    在一次采访中 我被要求编写一个程序 算法来使用递归对数字数组进行排序 虽然我含糊地回答了它 但我尝试并想出了以下代码 您可以使用以下JSFiddle https jsfiddle net RajeshDixit 2u9mLegv 1 链接来
  • 我在 firebase.auth.ApplicationVerifier 中遇到问题

    错误发生在signInWithPhoneNumber 的第二个参数中 我无法解决这个问题 我使用了三种方法来发送 otp 验证 otp 和最后用于验证码 methods sendOTP e e preventDefault if this
  • Moment.js 在 Firefox 中返回 NaN,但在 Chrome 中不返回 NaN

    我有以下代码行 moment 11 10 2013 09 03 AM diff moment minutes 在 Chrome 30 0 1599 101 中 以下行返回一个数字 它每分钟都会更改 因此确切的值不相关 在 Firefox 2
  • jquery $('id').text 带粗体

    我有一个 jquery 可以更改链接的文本 如下所示 if urlfind gt 0 linkurl text More info 和 HTML a href a 我试图为此链接添加粗体 但添加 b More Info b 让它们在文本本身
  • 我们如何调用react-navigation中的特定类型的action?

    如何使用 NavigationAction 调用操作 如果用户没有令牌 则会返回初始页面 我想重置 初始化 MainTabNavigator componentWillReceiveProps nextProps if nextProps
  • 如何在sessionStorage中保存Mobx状态

    试图从根本上实现这一点https github com elgerlambert redux localstorage https github com elgerlambert redux localstorage这是针对 Redux 的
  • 将 viewbag 转换为 javascript 数组

    我想将数据从 ViewBag mytags 获取到 Javascript 数组 但我无法执行此操作 function var sampleTags new Array var array Html Raw Json Encode ViewB
  • 如何为 HTML 验证提供自定义验证错误消息?

    当我使用默认 HTML 验证时 它会显示默认错误消息 这不是我想向客户显示的 我需要自定义消息并为每个验证提供不同的信息 例如最小 最大 类型和要求 例如 该字段为必填项 值不匹配 参考传统的HTML代码
  • 将数据发送到 parse.com 并更新 Angular $scope

    我正在将数据发送到 parse com 上的类 我想运行此函数并更新 scope无需重新加载视图 创建一个Programme运行下面的函数工作正常 但是有时在创建新程序后不会更新视图 并且需要刷新页面 当调用整个函数时 如底部所示 getP
  • 是否可以模拟 isTrusted=true

    我希望在调用 touchStart 事件时能够模拟 isTrusted true 是否有任何库或任何类型的解决方法可以实现这一点 以下是我以编程方式运行 touchStart 时的输出与实际调用 touchStart 时的输出 我正在使用移
  • javascript 中的类和类名有什么区别?

    为了找到某个类名的子对象 我必须创建自己的辅助函数 findChildrenByTagName function obj name var ret for var k in obj children if obj children k cl
  • Html页面在底部加载

    我需要一个 HTML 页面在页面加载时自动向下滚动 所以基本上加载在底部 可以使用JavaScipt吗 请您帮助我或引导我走向正确的方向 感谢所有帮助 谢谢 尝试这个 window scroll 0 document documentEle
  • 有没有办法在不托管网站的情况下呈现网站并共享它?

    我正在为一个项目创建一个 repl it 网站 问题是我的老师要求不要发布该网站 这意味着我无法使用 repl it 来托管它 我想知道是否有任何方法可以制作可以通过 Google Chrome 查看的网站副本 而无需连接到主机 我有所有的
  • 展平数组中的对象

    大家好 我从响应中获取了一系列对象 我需要将所有学生对象展平为简单的学生姓名 但不确定如何进行 任何帮助将不胜感激 数组示例 students id 123456 name Student Name active true students
  • 如何在禁用按钮上启用 Bootstrap 工具提示?

    我需要在禁用的按钮上显示工具提示 并在启用的按钮上删除它 目前 它的工作原理是相反的 扭转这种行为的最佳方法是什么 rel tooltip tooltip
  • Firebug 分析问题:“没有要分析的活动”

    我想用一些 javascript jQuery 尝试一些不同的选项 看看哪个是最快的 但是我无法让分析正常工作 这是我要测试的代码 this keypress function e console profile test retrieve
  • JS 中的展开/休息运算符如何工作? [复制]

    这个问题在这里已经有答案了 我正在努力完全理解扩展 休息运算符在 JS 中的工作原理 我已经阅读了 MDN 文档 但我仍然不完全清楚 我在下面提供了一个示例 我在其中使用了它并且它按预期工作 const users name Samir a

随机推荐

  • springboot注解--基础--01--注解

    springboot注解 基础 01 注解 https blog csdn net zhou920786312 article details 130844305 https blog csdn net zhou920786312 arti
  • vue启动报错vue-cli-service: command not found

    要配置环境变量以便能够在任意位置使用 Vue CLI 你可以按照以下步骤操作 确保已经全局安装了 Vue CLI 如果尚未安装 请使用以下命令进行全局安装 Copy Code npm install g vue cli 打开命令行终端 并输
  • vue实现拍照人脸识别功能带人脸选中框

    前言 实现打开摄像头 并识别人脸 实现效果 实现步骤 一 安装 1 官网下载 tracking js 的代码包官网入口 2 npm下载 执行命令 cnpm install tracking save 二 demo案例代码
  • nexus扩容后,代理功能出错,重启失败原因排查

    用nexus做仓库 其中有yum maven docker helm 当时搭建的时候觉得100g磁盘空间够用了 结果后期大家都在使用 不到俩月就磁盘占满了 无奈知道将虚拟机的磁盘扩容 扩容后nexus页面貌似一切正常 偶然发现 yum in
  • Spring Boot笔记

    文章目录 一 Spring Boot 入门 1 Spring Boot 简介 2 微服务 3 环境准备 1 MAVEN设置 2 IDEA设置 4 Spring Boot HelloWorld 1 创建一个maven工程 jar 2 导入sp
  • 在有机器学习和深度学习的基础上,如何自学AutoML算法?

    作者 FedAI联邦学习 链接 https www zhihu com question 334021426 answer 840727058 来源 知乎 著作权归作者所有 商业转载请联系作者获得授权 非商业转载请注明出处 AutoML技术
  • POI实现Word文件转PDF

    需求 采用spire doc生成word文件后 需要加一个预览PDF的功能 可以直接采用POI对docx文件进行转换处理 public static void main String args throws Exception String
  • 遗传算法的有趣实践

    源码 先放上我的源码链接 https github com AIjugg Genetic Algorithm git 自己思考加纯手写的代码 有兴趣的同学可以拿去玩玩 前言 生物进化是一个有趣的话题 人是怎么从人猿进化到的人 长颈鹿的脖子为
  • 基于Java SSM+layui+mysql实现的图书借记管理系统源代码+数据库

    介绍 本项目使用的技术栈是SSM layui mysql 服务器使用的是tomcat 其中书籍图片存放的位置需要先在tomcat根目录下conf setting xml中配置虚拟路径 本项目配置的是D upload 完整代码下载地址 图书借
  • java mapper.readtree_java - 杰克逊的readValue和readTree:何时使用哪个? - 堆栈内存溢出...

    我刚刚开始使用Jackson JSON库 杰克逊是一个非常强大的库 但它有一个非常广泛的API 很多事情可以通过多种方式完成 这使得很难在杰克逊找到自己的方式 如何知道什么是正确 最好的做事方式 我为什么要使用这个解决方案 String j
  • 笔试题8:一些常见的转义字符

    a 响铃 b 退格 f 换页 n 换行 r 回车 t 水平制表 v 垂直制表 反斜杠 文号字符 单引号字符 双引号字符 0 空字符 Null ddd 任意字符 三位八进制数 xhh 任意字符二位十进制数
  • 悟空CRM / 72crm-11.0-Spring部署

    目录 悟空CRM部署 悟空CRM目录结构 悟空CRM使用的主要技术栈 使用说明 一 前置环境 二 JDK1 8 Maven3 5安装 三 安装Mysql数据库 四 安装Elasticsearch 6 8 6 五 安装Redis 六 Naco
  • 如何实现Linux系统和Windows系统之间的文件传输

    一 FTP的概念 FTP服务 用来传输文件的协议 FTP是一种上传和下载用的软件 用户可以通过它把自己的PC机与运行FTP协议的服务器相连 访问服务器上的程序和信息 与大多数Internet服务一样 FTP也是一个客户机 服务器系统 用户通
  • 物联网产业到2023年连接数将突破20亿

    导读 随着经济社会数字化转型和智能升级步伐加快 物联网逐渐成为新型基础设施的重要组成部分 近日 工信部等8部门联合印发 物联网新型基础设施建设三年行动计划 2021 2023年 下称 行动计划 明确到2023年底 在国内主要城市初步建成物联
  • web服务器推送技术

    传统模式的 Web 系统以客户端发出请求 服务器端响应的方式工作 不能满足很多现实应用的需求 譬如 监控系统 后台硬件温度 电压发生变化 即时通信系统 其它用户登录 发送信息 即时报价系统 后台数据库内容发生变化 即时信息系统 微博 说说实
  • leetcode -------414. 第三大的数 C语言版本

    目录 题目 解题思路 图解 代码 题目 414 第三大的数 给你一个非空数组 返回此数组中 第三大的数 如果不存在 则返回数组中最大的数 示例 1 输入 3 2 1 输出 1 解释 第三大的数是 1 示例 2 输入 1 2 输出 2 解释
  • STL list使用

    List 容器 list是C 标准模版库 STL Standard Template Library 中的部分内容 实际上 list容器就是一个双向链表 可以高效地进行插入删除元素 使用list容器之前必须加上
  • VMware--配置php debug环境之PHPStudy+VSCode Xdebug php调试

    目录 1 win配置php环境 1 1 配置PHPStudy 1 1 1 下载phpstudy 1 1 2 配置phpstudy 1 1 3 测试phpstudy是否配置完成 1 2 配置环境变量 1 2 1 打开环境变量 添加配置 1 2
  • OpenWrt 学习记录

    OpenWrt 学习记录 ssh setting CodePath review Makefile CURDIR MAKEFILE LIST ssh setting keygen ssh keygen t rsa C hugh win10W
  • error Missing “key“ prop for element in array react/jsx-key

    react遇到一个奇怪的问题 error Missing key prop for element in array react jsx key 检查了jsx中使用map的 都定义了key div otherList map item an