一个bug的收获-数组、对象的遍历、数组的筛选、react调试工具

本文分享了一个bug引发的学习经历,包括使用VSCode的Debugger for Chrome进行React调试,以及利用filter、map等方法优化数组操作。作者强调了bug的价值及团队沟通的重要性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

向来对bug有虔诚的尊重。因为自己迂回向前的过程中,bug是黑暗中的灯塔。

就在昨天,一个bug引发了连锁反应。

场景

功能测试完毕之后,到了PO那里进行验收,发现某个条件下的查询结果给出了异常提示。

前天晚上在家码的这部分功能,过程中确实有一个问题,是在条件判断里没有将数组中的多余元素删除,所以会出现异常提示,已经修改过了。现在又出现了,可能哪块又有问题了。

然后就有了如下的学习

react调试工具–VSCode中的Debugger for Chrome

对于写代码来说调试很重要,不然就和瞎子摸象一样。

接触react时间很长,实际开发深度却很浅,抛异常居然手足无措。日常在这种战场,用关键代码地方加入调试语句,然后或看控制台、或看alert提示框这种小米加步枪的形式,基本可以解决大部分调试需要。

此时的现在却明显感觉到束手束脚,在浏览器中直接调试js代码直接打断点,很方便。可是现在这个打包了之后的东西要怎么弄?

果然实践才能证明真理的重要性,这中时候才会去想我要怎么做才可以方便的调试react。

学东西不求太完美,够用就好,一轮查询后vscode中下载Debugger for Chrome插件,就可满足。

数组中筛选元素–filter

死脑筋的我对过滤数组使用for循环情有独钟中,下图是导致出现异常的原因

在这里插入图片描述
然后我的做法是不再删除,而是搞一个新数组,把符合的元素存到这个新数组里。然后去群里本着炫耀的态度去说教了一番,没多久一个英勇少年出现了,说可以使用filter或者map。首先内心响起一个尴尬的声音,这。。。。。

不过我向来都是不耻下问,承认不会并不可耻,谦虚学习就好了。顶着自己老旧的光环和标签对他人的能力嫉妒且嗤之以鼻可就危险了。

不以物喜不以己悲,允许自己有不懂,不懂之后虚心求教,无关乎对方是80后、90后、00后、甚至2020后,学习面前人人平等,记得要摘掉有色眼镜,带时间长了会头晕的。

所以对于别人说是不是觉得被后浪推前浪了,觉得年龄太大没人家年龄小有优势呀这种说辞,会一概略过。为什么年龄小的就必须比我懂得少,为什么我就必须不能有不懂得,为什么我必须要为这种情况感到羞愧、难过、嫉妒。自己给自己贴标签真的很傻气,无论之前怎么样,你只是现在的你,和别人眼里的你无关。

数组遍历–map方法、for…of

昨天的bug学到了filter的好处,三行代码直接覆盖了原来六行还有bug的代码。今天功能中又有了对象套数组,数组套对象的遍历场景。举一反三这种能力其实是很可怕的,好吧。

既然新的方法这里好用,那就用map遍历呗。N旧之前的记忆告诉我数组和对象可能都能用map方法,正好数据第一层是对象,一试报异常,obj.map is not a function,傻了。搞可以,不能上来就瞎搞,我就是在瞎搞。赶紧查大犀牛,map方法明确是数组的方法。

ES6中记得还见过for…of,拿来继续用来遍历对象,依然报错,obj is not iterable,对象不是可迭代的。继续查阮一峰教主的ES6,上边赫然写着适用:数组、Set、Map,我又在乱搞。

对象的遍历–for…in

通过数组的试错,对象的遍历方法也明白了,感情之前一个for循环走遍天下,此时确实不怎么灵光了。

奖励

学到这么多值了,得隆重感谢一下PO小姐姐,群里千言万语表白了一下,她说要糖,今天中午去便利蜂七块九买了一袋,给了她一块,给孩子高兴坏了。一袋糖放到抽屉里,下次收到有意义的bug就给一块糖奖励。
在这里插入图片描述

最后

尊重bug,更要感谢提出它们的人,撸代码的路上不可或缺。

React Native 和 TypeScript 开发过程中,遇到“cannot assign void to type ReactNode”的错误通常是因为 `.map()` 函数中的回调函数未能正确返回一个有效的 React 节点。此外,在遍历和修改符合条件的对象数组时,也需要遵循 TypeScript 的类型约束规则以确保代码的安全性和可维护性。 ### 错误解析 当使用 `.map()` 方法处理数据列表时,如果回调函数没有显式返回值(或返回的是 `void` 类型),TypeScript 会抛出类似的错误:“Cannot assign void to type ReactNode”。这是因为 `.map()` 返回的新数组应由合法的 React 子节点组成,而非 `void` 类型[^1]。 例如以下代码会导致错误: ```typescript const items = dataArray.map(item => { if (item.active) { console.log('Active Item:', item); } }); // 此处未返回任何内容,因此推导为 void[] ``` --- ### 遍历并修改符合条件的对象数组 假设有一个对象数组需要筛选出符合条件的对象,并对其进行更新后再渲染到界面上。可以通过以下方式实现: #### 示例场景 假设有如下数据结构: ```typescript interface Item { id: number; name: string; active: boolean; } const dataArray: Item[] = [ { id: 1, name: 'Item A', active: false }, { id: 2, name: 'Item B', active: true }, { id: 3, name: 'Item C', active: false }, ]; ``` 目标是找到所有 `active === true` 的对象,并将其名称前加上 `[ACTIVE]` 标记后重新渲染。 --- ### 实现方法 #### 使用 `.map()` 并返回新的对象 `.map()` 方法允许对原数组中的每一项进行转换操作,同时确保新数组具有相同的长度。以下是具体实现: ```typescript const updatedArray = dataArray.map(item => { if (item.active) { return { ...item, name: `[ACTIVE] ${item.name}` }; // 更新符合条件的对象 } return item; // 不符合条件则保持不变 }); ``` 这里的关键在于每次迭代都需要返回一个新的对象或原有对象本身,从而形成完整的映射关系。 --- #### 渲染更新后的数组 将上述更新后的数组传递至 JSX 中渲染时,务必保证每个元素都有对应的返回值。例如: ```tsx return ( <View> {updatedArray.map(item => ( <View key={item.id}> <Text>{item.name}</Text> </View> ))} </View> ); ``` 注意:`key` 属性用于帮助 React 区分不同子组件,避免因重复索引引起的性能问题[^4]。 --- ### 处理可能为空的情况 如果部分逻辑可能导致某些情况下不返回任何内容,则可以结合条件运算符过滤掉无效项。例如: ```typescript const filteredAndUpdatedArray = dataArray .filter(item => item.active) // 筛选出符合条件的对象 .map(activeItem => ({ ...activeItem, name: `[ACTIVE] ${activeItem.name}` })); ``` 此时无需担心返回 `void` 类型的问题,因为 `.filter()` 已经提前移除了不符合条件的项。 --- ### 断言非空值 在某些复杂场景下,可能存在不确定性的变量(如可能是 `null` 或 `undefined`)。可以借助非空断言语法 (`!`) 明确告知编译器这些值一定存在[^2]。例如: ```typescript const user: string | null = getUserData(); console.log(user!.toUpperCase()); // 假设我们知道 user 不会为 null ``` 不过需要注意,过度依赖此类断言可能会掩盖潜在的运行时错误,应在充分确认前提条件下谨慎使用。 --- ### 动态类型声明 尽管 TypeScript 推崇静态类型检查,但在特殊需求下也可临时放宽限制。例如通过 `any` 或者动态类型声明绕过严格的类型验证[^3]。然而这种做法并不推荐,因为它削弱了 TypeScript 的核心优势之一——强类型保障。 示例: ```typescript let dynamicValue: any = {}; if (someCondition) { dynamicValue = fetchData(); // 可能返回任意类型 } renderDynamicContent(dynamicValue as unknown as JSX.Element); // 强制转为 JSX 元素 ``` --- ### 总结 - 在使用 `.map()` 时始终确保回调函数返回有效内容。 - 结合 `.filter()` 和 `.map()` 提高代码简洁度与安全性。 - 合理运用非空断言优化必要场景下的类型校验。 - 尽量避免滥用动态类型声明以免破坏项目整体一致性。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值