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

  • 一般纳税人销售旧货
  • 个调税新政策
  • 视同销售的销项税怎么计算?
  • 增值税纳税人是委托方还是受托方
  • 资产负债表怎么填
  • 合资公司注册成立流程
  • 出售自用汽车的税率
  • 企业所得税税率
  • 汇算清缴退回的所得税
  • 基本户被冻结怎么缴投标保证金
  • 2019年地方各项基金费申报表填写错误要交滞纳金吗
  • ATM可以存款到对公账户吗?
  • 跨期租金收入税怎么算
  • 房贷抵税如何申请流程
  • 专项应付款如何核算
  • 营改增之前固定资产可以抵扣吗
  • 增值税专用发票有效期是多长时间
  • 增值税附加税怎么报税
  • 建筑业商业保险受益人可以是公司吗
  • 劳务派遣直接支付工资吗
  • 西安职业中等专业学校校长
  • 物业公司停车费怎么开票
  • 有形动产经营租赁服务税率
  • 子公司向母公司借款
  • 专票密码区出来一点能报吗
  • 高新产业扶持补贴怎样申请
  • 无偿取得股权账务处理
  • 应收票据质押怎么看
  • mac如何连接电脑
  • 中介公司代发工资合法吗
  • 以前年度应收账款无法收回
  • 免租期房产税增值税如何计算
  • mac睡眠后无法正常唤醒
  • 股权和债权转让的关系
  • 外币报表折算差额计入其他综合收益
  • 华盛顿州帕卢斯心雕塑
  • php操作cookie
  • laravel5.4利用163邮箱发送邮件的步骤详解
  • 什么情况下可以土葬
  • 珠宝行业会计核算内容
  • Css中的color属性用于设置html元素的背景颜色
  • 销售费用工资明细科目
  • 享受小微企业免征增值税政策
  • 高速费发票可以重开吗
  • mysql中事务的作用
  • vue安装插件
  • 工资只计提没有发放需要申报个税吗
  • SQLServer2005与SQLServer2008数据库同步图文教程
  • 土地使用税计入管理费用还是税金及附加
  • 投资性房地产租金
  • 补充登记法的操作步骤
  • 税审报告需要什么资料
  • 直接减免增值税的情形
  • 老板怎么从公户拿钱
  • 工程施工企业外管证怎么办理
  • 房子贷款之后尾款发票
  • 房地产开发企业建造的商品房,在出售前
  • 会计中的记账是什么意思
  • mysql 5.7.24安装
  • mysql获取当前时间
  • 教你鉴别耳机音质的好坏的几大技巧
  • window7临时文件
  • centos安装选择哪个
  • 手机苹果操作系统
  • linux vim
  • win8系统简介
  • win8网络连接受限怎么处理
  • win10右键菜单不显示
  • linux安装.sh
  • linux 使用
  • org.cocos2d.straydiary
  • Unity3D游戏开发毕业论文
  • Unity3D游戏开发pdf
  • unity uishader
  • 美容行业增值税率是多少
  • 进口商品的消费税计入成本吗
  • 珠海自助征信查询机
  • 重庆税务局发票作废
  • 贵州税务发票流向查询
  • 电子发票查询平台打印
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设