位置: 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眼中的世界 ——人工智能绘画入门(关于眼中的世界的作文)

  • 创业+故事+网:马云手下的9个漂亮女人,个个身价上亿。(创业故事网)

    创业+故事+网:马云手下的9个漂亮女人,个个身价上亿。(创业故事网)

  • shellexecutehooks如何创建正确的(shellexecutehooks)

    shellexecutehooks如何创建正确的(shellexecutehooks)

  • vivo无字模式怎么设置(vivo手机无键盘怎么设置)

    vivo无字模式怎么设置(vivo手机无键盘怎么设置)

  • u盘拷贝速度慢(U盘拷贝速度慢)

    u盘拷贝速度慢(U盘拷贝速度慢)

  • 芯片主频是什么意思(芯片主频是什么东西)

    芯片主频是什么意思(芯片主频是什么东西)

  • oppoa11n是什么型号(oppoa11是什么机型)

    oppoa11n是什么型号(oppoa11是什么机型)

  • 电脑左下角开始键不见了(电脑左下角开始菜单点了没反应)

    电脑左下角开始键不见了(电脑左下角开始菜单点了没反应)

  • 滴滴单子少什么原因(滴滴单子很少)

    滴滴单子少什么原因(滴滴单子很少)

  • 苹果换屏后反复重启(苹果换屏后一直重启是怎么回事)

    苹果换屏后反复重启(苹果换屏后一直重启是怎么回事)

  • airpods2代和3代区别(airpods 2代与3代)

    airpods2代和3代区别(airpods 2代与3代)

  • 电脑上大写字母按哪个键(电脑上大写字母怎么转换汉字)

    电脑上大写字母按哪个键(电脑上大写字母怎么转换汉字)

  • 华为手机怎么调大内存(华为手机怎么调回彩色屏)

    华为手机怎么调大内存(华为手机怎么调回彩色屏)

  • 苹果8不显示4G光显示GPRS(苹果手机8p4g不显示)

    苹果8不显示4G光显示GPRS(苹果手机8p4g不显示)

  • 如何恢复已清理的微信图片(如何恢复已清理的微信文件)

    如何恢复已清理的微信图片(如何恢复已清理的微信文件)

  • iphone11pro双卡吗(苹果11pro是否双卡)

    iphone11pro双卡吗(苹果11pro是否双卡)

  • oppo手机双麦在哪设置(oppo手机怎么设置双麦克风)

    oppo手机双麦在哪设置(oppo手机怎么设置双麦克风)

  • 华为终端是什么(华为终端是什么部门)

    华为终端是什么(华为终端是什么部门)

  • 苹果充电接口叫什么(换一个苹果充电口多少钱)

    苹果充电接口叫什么(换一个苹果充电口多少钱)

  • iphone x如何打开天气(iphonex如何打开电池百分比)

    iphone x如何打开天气(iphonex如何打开电池百分比)

  • 淘宝店铺月销量怎么看(淘宝店铺月销量怎么算)

    淘宝店铺月销量怎么看(淘宝店铺月销量怎么算)

  • 华为手机hd怎么关闭(华为手机hd怎么关闭掉、怎么找不到高清通话呢?)

    华为手机hd怎么关闭(华为手机hd怎么关闭掉、怎么找不到高清通话呢?)

  • 双十一活动是多少天(双十一活动多少淘气值)

    双十一活动是多少天(双十一活动多少淘气值)

  • 怎么才算拼多多新用户(怎么才算拼多多新人)

    怎么才算拼多多新用户(怎么才算拼多多新人)

  • 手环心率监测准吗(手环测心率准确)

    手环心率监测准吗(手环测心率准确)

  • 小米9深空灰好看吗(小米九深空灰)

    小米9深空灰好看吗(小米九深空灰)

  • iphonex多长厘米(iphonex多长多少厘米图解)

    iphonex多长厘米(iphonex多长多少厘米图解)

  • 微信解冻要多久(微信解冻要多久才可以登上)

    微信解冻要多久(微信解冻要多久才可以登上)

  • Windows7旗舰版系统电脑双显卡切换到独立显卡的图(windows7旗舰版最新版本)

    Windows7旗舰版系统电脑双显卡切换到独立显卡的图(windows7旗舰版最新版本)

  • 适用综合所得税率表
  • 小规模纳税人在选择供应商时,主要考虑购进货物
  • 简易征收增值税怎么做账
  • 当月开票当月收款
  • 应交税费减免税款
  • 政府电费补贴文件
  • 公司开业两周年致辞
  • 总公司调到子公司
  • 延期付款利息是多少钱
  • 小规模与一般纳税人哪个好
  • 收到教育费附加返还款现金2000元会计分录
  • 固定资产投资方案
  • 企业收到票据时应以什么入账
  • 向关联企业借款债资比
  • 公司解散实收资本退还怎么写
  • 高新企业研发项目
  • 职工食堂操作流程图
  • 溢价购入债权投资是为啥
  • 一般纳税人和小规模纳税人的区别
  • 借支单怎么写才受法律保护
  • vue public assets
  • 酒店里用了收费的东西怎么算
  • 报错专业了可不可以改
  • PHP:cal_days_in_month()的用法_日历函数
  • php domdocument
  • 企业所得税季初数怎么填
  • 收到采购专用发票
  • php实现页面浏览量
  • css 100vw、100vh出现滚动条怎么解决
  • php提供的字符串函数
  • 漫天花雨异闻
  • 蓝桥杯真题c语言
  • 一万字综述怎么写
  • [九]深度学习Pytorch-transforms图像增强(剪裁、翻转、旋转)
  • dnf指令键&怎么设置
  • discuz去除底部
  • 年末本年利润怎么结转
  • 2020织梦建站教程全集
  • 服务费的发票税率是多少
  • 哪些需要缴纳企业所得税
  • 分组计数什么意思
  • 中小型企业营业额和从业人数
  • 社会保险与商业人身保险的区别有
  • 股东所有者权益负数
  • 企业所得税汇算清缴时间
  • 增值税发票丢失罚款多少
  • 质量问题举例
  • 车票抵扣填在申请表哪里
  • 餐饮业做账会计分录大全,实用!
  • 如何理解应收账款平均余额
  • 企业为什么要进行绩效管理?
  • 互联网代记账业务
  • solaris 10安装
  • commserver什么意思
  • win10无法安装telnet
  • f11一键恢复系统详解
  • win8开始菜单变为win10
  • web项目可以打包成jar包吗
  • opengl画实体
  • android4.4w
  • 深入理解linux系统
  • python hashcode
  • python 先序遍历
  • perl 采集入库脚本分享
  • flash 3 utility
  • 创建步骤
  • shell编程怎么执行
  • CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
  • javascript教程推荐知乎
  • 八大排序算法的时间空间复杂度
  • 菜鸟教程jstl
  • js递增数字
  • python3多态
  • 地方税务局稽查局卢永胜
  • 财税老师刘杨年龄
  • 税务局绩效工作总结
  • 国税局招录条件
  • 转让定价调查与调整实务问答
  • 车辆购置税交了怎么查询不到
  • 依法行政的观念
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设