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

  • 固定资产中的动态投资包括
  • 或有资产的确认条件ACCA
  • 银行代发工资必须交社保吗
  • 单位全额承担社保相当于领生活费了吗
  • 一般纳税人应交增值税怎么算
  • 会务费税前扣除材料
  • 职工福利费专票账务处理
  • 年终奖如何合理发放
  • 事业单位结余如何做分录
  • 事业单位自筹事业人员
  • 股票持有多久可以打新股
  • 持有至到期投资属于什么科目
  • 非盈利企业账务处理
  • 关于现代服务业的书籍
  • 为什么查询发票显示查无此票
  • 工资为负数需要给公司吗
  • 印花税是当月交还是次月交
  • 公司租房可以入公积金吗
  • 纳税调增调减项目有哪些各站多少比例
  • 违约金收税吗
  • 社保和医保是分开到账吗
  • 跨月预缴如何做账
  • 安装费算固定资产
  • 补缴的附加税怎么入账
  • 文件夹不能打开没有反应
  • 事业单位负债类科目包括哪些科目
  • linux怎么查看防火墙信息
  • 增值税一般纳税人和小规模纳税人的区别
  • 虚拟机不能互相访问
  • php提供了________和___________两种复合数据类型
  • 固定资产加速折旧方法
  • 交易性金融资产属于流动资产
  • vue实现路由跳转传参
  • 人工智能内容生成
  • opencv教程
  • php execute函数
  • 会计证书现场领取
  • 材料暂估入账
  • 企业投资计入什么科目
  • 逾期超过一年
  • 员工宿舍的物业费能否抵扣
  • 两个公司的钱转来转去
  • 用友u8财务报表打印设置在哪
  • 非应税项目是有哪些项目
  • 跨年发票能不能用
  • 应收利息和应收股利属于什么科目
  • 未分配利润转增股本要交税吗怎么交
  • 结转损益类科目余额
  • 城建税如何计提税金
  • 公司水电费分摊怎么算
  • 主营业务收入的概念
  • 进口产品没有发票怎么入账
  • 非正常损坏的商品计入哪个会计科目
  • 研发阶段的产品质检要参与
  • 商业承兑汇票过期了怎么办
  • 公司计提减值好吗
  • sql server数据库跟踪
  • 提高sql执行效率的方法
  • mysql按字节截取
  • mysql5717安装及配置超详细教程
  • sedsvc.exe是什么
  • mac升级最新系统会卡么
  • windows7开机
  • centos如何操作
  • win10 window
  • linuxdhcp服务器管理与配置
  • win10系统优化的方法
  • 深入理解新发展理念,推进供给侧结构性改革 心得体会
  • shell脚本实现文件移动、复制等操作
  • 经典都有什么
  • python 数据处理 pdf
  • unity3D游戏开发
  • 前端闭包函数
  • js咋用
  • 随申办如何缴纳社保
  • 浙江国地税申报网
  • 青岛市高新区是红岛吗
  • 房产税江苏2021年征收标准
  • 增值税发票怎么购票
  • 江苏网上税务局官网登录
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设