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

  • 如何找回访问过的网站(如何找回访问过的网站注册信息)

    如何找回访问过的网站(如何找回访问过的网站注册信息)

  • 华为p40支持无线充电吗(华为P40支持无线充电的手机)

    华为p40支持无线充电吗(华为P40支持无线充电的手机)

  • 荣耀play4tpro屏幕刷新率是多少(荣耀play4tpro屏幕多少钱)

    荣耀play4tpro屏幕刷新率是多少(荣耀play4tpro屏幕多少钱)

  • 苹果11 pro手机尺寸(苹果11pro机身尺寸)

    苹果11 pro手机尺寸(苹果11pro机身尺寸)

  • 买票显示可候补啥意思(买票显示候补抢票是什么意思)

    买票显示可候补啥意思(买票显示候补抢票是什么意思)

  • 快手个性化设置没有显示使用的音乐(快手个性化设置怎么设置开关)

    快手个性化设置没有显示使用的音乐(快手个性化设置怎么设置开关)

  • iphonex怎么关机(iphonexr怎么关机)

    iphonex怎么关机(iphonexr怎么关机)

  • 换主板需要注意什么(换主板需要注意些什么)

    换主板需要注意什么(换主板需要注意些什么)

  • 荣耀20pro怎么开机(荣耀20pro怎么开红外线)

    荣耀20pro怎么开机(荣耀20pro怎么开红外线)

  • 腾讯视频可不可以用手机号码登录(腾讯视频可不可以手机号登录)

    腾讯视频可不可以用手机号码登录(腾讯视频可不可以手机号登录)

  • 微信注销了还能登录吗(微信注销了还能查到转账记录)

    微信注销了还能登录吗(微信注销了还能查到转账记录)

  • 公众号违规对微信有影响吗(公众号违规会封微信号吗)

    公众号违规对微信有影响吗(公众号违规会封微信号吗)

  • a1661美版是哪个运营商的(美版a1660是什么版本)

    a1661美版是哪个运营商的(美版a1660是什么版本)

  • 为什么探探老是支付失败(为什么探探老是给我发信息)

    为什么探探老是支付失败(为什么探探老是给我发信息)

  • licecap可以卸载吗(recap卸载影响cad吗)

    licecap可以卸载吗(recap卸载影响cad吗)

  • i5 8400配什么主板(i58400配什么主板性价比高)

    i5 8400配什么主板(i58400配什么主板性价比高)

  • 华为体脂秤怎么解除绑定(华为体脂秤怎么调整公斤和斤)

    华为体脂秤怎么解除绑定(华为体脂秤怎么调整公斤和斤)

  • 苹果11都有什么功能(苹果11都有什么颜色)

    苹果11都有什么功能(苹果11都有什么颜色)

  • 11和11pro的区别(爱酷11和11pro的区别)

    11和11pro的区别(爱酷11和11pro的区别)

  • 苹果x怎么取消一碰就亮(苹果X怎么取消上滑解锁)

    苹果x怎么取消一碰就亮(苹果X怎么取消上滑解锁)

  • 微信辅助扫码是什么(微信辅助扫码是干什么的)

    微信辅助扫码是什么(微信辅助扫码是干什么的)

  • 使用scrollTo/scrollTop让页面元素滚动到指定位置, 并设置滚动动画(使用二氧化碳灭火器时人应该站在什么位置)

    使用scrollTo/scrollTop让页面元素滚动到指定位置, 并设置滚动动画(使用二氧化碳灭火器时人应该站在什么位置)

  • 银行委托贷款上征信吗
  • 河北金税盘
  • 我国现行的增值税属于什么
  • 小规模纳税人利润如何缴税
  • 现金流量表季度申报可以不填吗
  • 资产负债表里面的应收账款怎么算
  • 银行承兑汇票背书可以拆分
  • 技术成果投资入股企业所得税递延纳税备案表
  • 经营性项目应收减少额怎么算
  • 向境外分派红利怎么计算缴纳企业所得税
  • 企业注销当月无法申报个税
  • 工业企业辅助生产费用的分配方法
  • 不动产在建工程使用的外购物资可以抵扣吗
  • 别人退保证金多久能到账
  • 购买座机计入哪个科目?
  • 资产减值准备的会计科目
  • 委托代理合同后果的承担
  • 自己承担所有
  • 2021年路桥费抵扣最新政策
  • 运输发票抵扣税率是有多少?
  • 企业的停车违章怎么查
  • 房地产开发企业资质管理规定
  • 土地税返还的会计分录
  • 小规模纳税人可以享受小微企业吗
  • 税务登记都需要什么
  • 计提房产税的会计分录怎样做
  • 坏账准备的计提应当关注
  • 房地产会计分录大全
  • 资金拆借利息收入是什么意思
  • 1697510649
  • 利润的计算公式excel
  • 计划成本是什么科目
  • 不具备生产条件的生产经营单位
  • 税金及附加包括个人所得税吗
  • 华硕主板bios更新后开不了机
  • 职工教育经费怎么做凭证
  • 交易性金融资产的入账价值
  • 股份支付的成本费用可否税前扣除?
  • 进项税少入账如何处理
  • dxva2.dll是什么意思
  • 补充养老保险的特点
  • 小茴香的栽培技术
  • 前端项目中遇到的问题,如何解决
  • php输入月份输出天数
  • PHP+MySql+jQuery实现的"顶"和"踩"投票功能
  • 工作服列支什么科目
  • php两个等号和三个的区别
  • 劳务公司获奖感言简短
  • 什么是财务报表分析,方法有哪些
  • 报销职工福利
  • wordpress 批量添加标签
  • 门面出租需要什么手续
  • 普通发票有什么
  • 企业所得税报表查询怎么查
  • 在mysql中设置事务保存点
  • 小规模纳税人减按1%政策
  • 公司购买的车辆折旧年限
  • 油卡充值做账
  • 公司车辆做账交增值税吗
  • 技术服务费计入主营业务成本
  • 买货品的咨询服务有哪些
  • 固定资产损失计入什么科目
  • 事业单位无形资产摊销是当月还是下月
  • 委托收款的流程
  • Windows Server 2008网络中顺畅访问“邻居”
  • 苹果系统如何访问u盘
  • vsftpd配置用户登录目录
  • linux xim
  • linux useradd -m
  • unity best fit
  • easyui-accordion
  • 复制文件到c盘需要管理员权限
  • androidstudio 教程
  • [置顶]马粥街残酷史
  • 西安市电子税务局
  • 江苏国税电子税局
  • 充值卡和预付卡区别
  • 定额发票属于什么类型
  • 丰台和朝阳中间是哪里
  • 江苏国税电子网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设