位置: IT常识 - 正文

React报错之map() is not a function(react错误处理)

编辑:rootadmin
React报错之map() is not a function

推荐整理分享React报错之map() is not a function(react错误处理),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:react useparams,react sourcemap,react中的map,react中的map,react map函数,react-bmap,react sourcemap,react sourcemap,内容如对您有帮助,希望把文章链接给更多的朋友!

当我们对一个不是数组的值调用map()方法时,就会产生"TypeError: map is not a function"错误。为了解决该错误,请将你调用map()方法的值记录在console.log上,并确保只对有效的数组调用map。

这里有个示例来展示错误是如何发生的。

const App = () => { const obj = {}; // ⛔️ Uncaught TypeError: map is not a function return ( <div> {obj.map(element => { return <h2>{element}</h2>; })} </div> );};export default App;

我们在一个对象上调用Array.map()方法,得到了错误反馈。

React报错之map() is not a function(react错误处理)

为了解决该错误,请console.log你调用map方法的值,确保它是一个有效的数组。

export default function App() { const arr = ['one', 'two', 'three']; return ( <div> {arr.map((element, index) => { return ( <div key={index}> <h2>{element}</h2> </div> ); })} </div> );}Array.isArray

你可以通过使用Array.isArray方法,来有条件地检查值是否为数组。

const App = () => { const obj = {}; return ( <div> {Array.isArray(obj) ? obj.map(element => { return <h2>{element}</h2>; }) : null} </div> );};export default App;

如果值为数组,则返回对其调用map方法的结果,否则返回null。这种方式不会得到错误,即使值不是一个数组。

如果值是从远程服务中获取,请确保它是你期望的类型,将其记录到控制台,并确保你在调用map方法之前将其解析为一个原生JavaScript数组。

Array.from

如果有一个类数组对象,在调用map方法之前你尝试转换为数组,可以使用Array.from()方法。

const App = () => {const set = new Set(['one', 'two', 'three']);return ( <div> {Array.from(set).map(element => { return ( <div key={element}> <h2>{element}</h2> </div> ); })} </div>);};export default App;

在调用map方法之前,我们将值转换为数组。这也适用于类数组的对象,比如调用getElementsByClassName方法返回的NodeList。

Object.keys

如果你尝试迭代遍历对象,使用Object.keys()方法获取对象的键组成的数组,在该数组上可以调用map()方法。

export default function App() { const employee = { id: 1, name: 'Alice', salary: 100, }; return ( <div> {/* 👇️ iterate object KEYS */} {Object.keys(employee).map((key) => { return ( <div key={key}> <h2> {key}: {employee[key]} </h2> <hr /> </div> ); })} <br /> <br /> <br /> {/* 👇️ iterate object VALUES */} {Object.values(employee).map((value, index) => { return ( <div key={index}> <h2>{value}</h2> <hr /> </div> ); })} </div> );}

我们使用Object.keys方法得到对象的键组成的数组。

const employee = { id: 1, name: 'Alice', salary: 100,};// 👇️ ['id', 'name', 'salary']console.log(Object.keys(employee));// 👇️ [1, 'Alice', 100]console.log(Object.values(employee));
本文链接地址:https://www.jiuchutong.com/zhishi/300523.html 转载请保留说明!

上一篇:基于imx8m plus开发板全体系开发教程4:Linux系统开发(imx6ul开源项目)

下一篇:AI眼中的世界 ——人工智能绘画入门(关于眼中的世界的作文)

  • qq农场怎么升级快(qq农场怎么升级比较快)

    qq农场怎么升级快(qq农场怎么升级比较快)

  • 微信怎么完成群公告(微信怎么完成群公告显示完成)

    微信怎么完成群公告(微信怎么完成群公告显示完成)

  • 荣耀play4支持指纹解锁吗(荣耀play 4t pro指纹在哪)

    荣耀play4支持指纹解锁吗(荣耀play 4t pro指纹在哪)

  • 苹果7p通话没声音免提都失灵(苹果7p通话没声重启又好了)

    苹果7p通话没声音免提都失灵(苹果7p通话没声重启又好了)

  • 录音m4a是什么意思呀(录音m4a是mp4吗)

    录音m4a是什么意思呀(录音m4a是mp4吗)

  • 刚注册的淘宝号就异常了(刚注册的淘宝号怎么养)

    刚注册的淘宝号就异常了(刚注册的淘宝号怎么养)

  • 畅联语音是什么意思(畅联语音是什么情况)

    畅联语音是什么意思(畅联语音是什么情况)

  • shp文件用什么软件打开(shp文件包含什么)

    shp文件用什么软件打开(shp文件包含什么)

  • 数据线三种接口名称(数据线三种接口图片)

    数据线三种接口名称(数据线三种接口图片)

  • 苹果手机直播卡的原因(苹果手机直播卡顿)

    苹果手机直播卡的原因(苹果手机直播卡顿)

  • 被好友删除还能看到朋友圈吗(被好友删除还能发消息)

    被好友删除还能看到朋友圈吗(被好友删除还能发消息)

  • 苹果11在阳光下怎么都看不清(苹果11在阳光下亮度最高了还是看不清)

    苹果11在阳光下怎么都看不清(苹果11在阳光下亮度最高了还是看不清)

  • 耳机主动降噪什么意思(耳机主动降噪什么牌子好)

    耳机主动降噪什么意思(耳机主动降噪什么牌子好)

  • 红米k20pro屏幕刷新率(红米k20pro屏幕刷新率在哪里看)

    红米k20pro屏幕刷新率(红米k20pro屏幕刷新率在哪里看)

  • 微信开机自动启动怎么关(微信开机自动启动怎么关闭)

    微信开机自动启动怎么关(微信开机自动启动怎么关闭)

  • wps制作密封线(wps密封条花边设计)

    wps制作密封线(wps密封条花边设计)

  • 戴尔笔记本电脑输入法怎么设置(戴尔笔记本电脑连不上wifi怎么解决)

    戴尔笔记本电脑输入法怎么设置(戴尔笔记本电脑连不上wifi怎么解决)

  • 淘宝怎么后台播放

    淘宝怎么后台播放

  • ip地址是固定的么(ip地址是固定的用户不能设置)

    ip地址是固定的么(ip地址是固定的用户不能设置)

  • 为什么从icloud下载图片失败(为什么从icloud下载这么慢)

    为什么从icloud下载图片失败(为什么从icloud下载这么慢)

  • 拼多多的扫一扫在哪呢(拼多多的扫一扫助力在哪里)

    拼多多的扫一扫在哪呢(拼多多的扫一扫助力在哪里)

  • 手机预售是什么意思(手机 预售)

    手机预售是什么意思(手机 预售)

  • 猫眼电影怎么改签(猫眼电影怎么改票)

    猫眼电影怎么改签(猫眼电影怎么改票)

  • 快手上自动回复是在哪儿弄的(快手上自动回复怎么设置)

    快手上自动回复是在哪儿弄的(快手上自动回复怎么设置)

  • 华为p30怎么设置时间24小时制(华为p30怎么设置指纹解锁)

    华为p30怎么设置时间24小时制(华为p30怎么设置指纹解锁)

  • Win11 Dev Build 22000.65开发预览版推送(附更新修复已知问题汇总)

    Win11 Dev Build 22000.65开发预览版推送(附更新修复已知问题汇总)

  • 复习 - node.js(接口案例)(nodejs基础知识)

    复习 - node.js(接口案例)(nodejs基础知识)

  • 使用 Python 处理 Json 数据(python处理数据教程)

    使用 Python 处理 Json 数据(python处理数据教程)

  • 计税基础怎么算
  • 商业承兑汇票未到期贴现
  • 银行预留印鉴是公章还是财务章
  • 住房补贴需要交什么材料
  • 税控盘及服务费会计分录
  • 商业承兑过期后多久失效
  • 报销必须是公司吗
  • 出售已使用固定资产增值税申报表
  • 利润分配未分配利润借贷方表示什么
  • 商业企业收取各项费用的税务与会计处理
  • 专利捐献
  • 记账凭证包括哪些种类
  • 铁路运费印花税税率
  • 库存商品报废进项转出
  • 暂估收入会计处理
  • 火腿属于免税产品吗
  • 规范合同签订的重要性
  • 房地产企业土地增值税清算案例
  • 金融企业准备金计提管理办法最新
  • 一次性收取跨年租金房产税怎么交
  • 销售退回涉及的科目
  • 新版edge浏览器历史记录
  • mac的分辨率怎么调
  • 进口缴纳的关税通过什么核算
  • 调整以前年度的收入怎么入账
  • win7 无法 启动
  • 酒店布草洗涤赔偿怎样折旧
  • Cpqset.exe是什么系统进程 Cpqset有啥作用
  • 库存商品的主要类型
  • php面向对象面试题
  • 应付账款与其他应付款科目调整
  • 受托代销商品会计分录受托方
  • php 单例模式优点及如何实现
  • 城市公交网
  • 现在前端的现状
  • 机票报销需要哪些才可以
  • 微信小程序几几年上线的
  • 无形资产的转让
  • PostgreSQL中常用的时间日期脚本使用教程
  • 织梦使用手册
  • 应交增值税进项税额
  • 税务信用级别A有什么好处
  • 口罩属于什么经济分类
  • 本月还未抄报,请抄报完成之后再申报
  • 转让不动产增值税征收管理办法
  • 支付给法律顾问怎么做账
  • 国际货运代理免增值税
  • 总账科目有应交税费对吗
  • 汇票与本票有何不同
  • 销售方开红字发票需要什么信息
  • 报废车收到的钱怎么做账
  • 出口货物索赔如何确认收入
  • 不征税发票和零税率发票
  • 新成立公司申报个税流程
  • 帐薄和账簿区别
  • win2000蓝屏0x0000007b
  • linux处理文件命令
  • centos更新yum update
  • 电脑进程wsappx是什么
  • ubuntu安装quagga
  • 关闭xp不需要的服务
  • linux rsyslogd
  • win10mobile官网
  • win10系统如何查看
  • ExtJS4 表格的嵌套 rowExpander应用
  • android adapter
  • 安卓微信5.0版本下载
  • jqueryui
  • 网络传输协议是事实上的国际标准
  • 页面滚动到底部
  • Node.js中的什么模块是用于处理文件和目录的
  • 用js获取地址栏url参数的方法
  • 最常见的左向右分流型心脏病是
  • python 生成器send
  • javascript数据类型有哪些
  • Python默认参数 数组坑
  • jquery跨域获取页面内容
  • 关于抓落实的诗句
  • 请问农村自建房彩钢瓦下面修房吊什么顶好
  • 苏州工业园区国资委
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设