React报错之map() is not a function
2023-02-18 16:41:37 时间
正文从这开始~
总览
当我们对一个不是数组的值调用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()
方法,得到了错误反馈。
为了解决该错误,请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));
我们只能在数组上调用map()
方法,所以我们需要获得一个对象的键或者对象的值的数组。
相关文章
- 从真实项目中抠出来的设计模式——第一篇:策略模式
- 在redis中使用lua脚本让你的灵活性提高5个逼格
- redis大幅性能提升之使用管道(PipeLine)和批量(Batch)操作
- redis-cli中那些或许我们还不知道的一些实用小功能
- 搭建高可用的rabbitmq集群 + Mirror Queue + 使用C#驱动连接
- 使用专业的消息队列产品rabbitmq之centos7环境安装
- 监视EntityFramework中的sql流转你需要知道的三种方式Log,SqlServerProfile, EFProfile
- 轻量级ORM框架——第二篇:Dapper中的一些复杂操作和inner join应该注意的坑
- 轻量级ORM框架——第一篇:Dapper快速学习
- asp.net mvc 之旅 —— 第六站 ActionFilter的应用及源码分析
- asp.net mvc 之旅 —— 第五站 从源码中分析asp.net mvc 中的TempData
- 分布式架构中一致性解决方案——Zookeeper集群搭建
- 搭建高可用的redis集群,避免standalone模式带给你的苦难
- asp.net mvc 之旅—— 第四站 学会用Reflector调试我们的MVC框架代码
- 使用强大的可视化工具redislive来监控我们的redis,别让自己死的太惨~~~
- asp.net mvc 之旅—— 第三站 路由模板中强大的自定义IRouteConstraint约束
- 使用memadmin可视化监视我们的memcache
- asp.net signalR 专题—— 第四篇 模拟RPC模式的Hub操作
- asp.net signalR 专题—— 第三篇 如何从外部线程访问 PersistentConnection
- asp.net signalR 专题—— 第二篇 对PersistentConnection持久连接的快速讲解