修复Cascader动态加载层级不存在报错导致不显示内容的问题,及Popup关闭按钮点穿的问题#3354
修复Cascader动态加载层级不存在报错导致不显示内容的问题,及Popup关闭按钮点穿的问题#3354clayzx wants to merge 2 commits intojdf2e:feat_v3.xfrom
Conversation
Walkthrough对 Cascader 懒加载链式归并中对子节点赋值增加了父节点空值保护;对 Popup 的关闭图标点击事件添加了 stopPropagation,避免冒泡影响其他点击逻辑。对外导出未变更。 Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor U as 用户
participant CI as CloseIcon(关闭图标)
participant PH as Popup(容器/遮罩)
participant H as 处理器
U->>CI: click
note right of CI: 新增:stopPropagation()
CI->>H: onCloseIconClick(e)
alt 返回真
H->>PH: close()
else 返回假
H-->>U: 不关闭
end
U->>PH: click(遮罩)
PH->>PH: overlay onClick
PH->>PH: close()
sequenceDiagram
autonumber
participant C as Cascader
participant R as reduce(懒加载链)
participant P as parent(可能为undefined)
participant N as pane(子节点)
C->>R: 迭代构建层级
R->>P: 取得当前父节点
alt P 存在
R->>P: P.children = N
else P 不存在
note right of R: 新增空值保护:跳过赋值
end
R-->>C: 返回最终 options
C->>C: setInnerOptions(...)
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested reviewers
Poem
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #3354 +/- ##
==========================================
Coverage 88.15% 88.15%
==========================================
Files 291 291
Lines 19212 19212
Branches 2988 2988
==========================================
Hits 16937 16937
Misses 2269 2269
Partials 6 6 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
src/packages/popup/popup.taro.tsx (1)
171-174: 放宽关闭条件判定,避免“未显式返回值不关闭”当前写法要求
onCloseIconClick显式返回 truthy 才会关闭;若用户回调未返回值(undefined),将导致不关闭,和直觉不符。建议改为“非 false 即关闭”,并使用可选链以防御空回调。可按以下方式调整:
const handleCloseIconClick = (e: ITouchEvent) => { e.stopPropagation() - onCloseIconClick(e) && close() + if (onCloseIconClick?.(e) !== false) close() }src/packages/cascader/cascader.taro.tsx (2)
165-176: 避免同名变量“parent”遮蔽,提升可读性与可维护性回调内部的
const parent = await promise会遮蔽外层parent,阅读和调试都容易混淆。建议重命名为node并相应替换,保持语义清晰。- await innerValue.reduce(async (promise: Promise<any>, val, key) => { - const pane = await onLoad({ value: val }, key) - const parent = await promise - if (parent) parent.children = pane - if (key === innerValue.length - 1) { - return Promise.resolve(parent) - } - if (pane) { - const node = pane.find((p) => p.value === val) - return Promise.resolve(node) - } - }, Promise.resolve(parent)) + await innerValue.reduce(async (promise: Promise<any>, val, key) => { + const pane = await onLoad({ value: val }, key) + const node = await promise + if (node) node.children = pane + if (key === innerValue.length - 1) { + return Promise.resolve(node) + } + if (pane) { + const next = pane.find((p) => p.value === val) + return Promise.resolve(next) + } + }, Promise.resolve(parent))
185-186: 避免陈旧闭包与竞态:完善依赖并添加“活性”守卫该
useEffect只依赖lazy,但内部使用了innerValue与onLoad;当外部受控值或加载函数变化时不会重新拉取,且并发加载可能造成越界更新。建议将依赖改为[lazy, innerValue, onLoad],并用active标记防止卸载后的setInnerOptions。- useEffect(() => { - const load = async () => { + useEffect(() => { + let active = true + const load = async () => { const parent = { children: [] } try { await innerValue.reduce(async (promise: Promise<any>, val, key) => { const pane = await onLoad({ value: val }, key) const parent = await promise if (parent) parent.children = pane if (key === innerValue.length - 1) { return Promise.resolve(parent) } if (pane) { const node = pane.find((p) => p.value === val) return Promise.resolve(node) } }, Promise.resolve(parent)) - // 如果需要处理最终结果,可以在这里使用 last - setInnerOptions(parent.children) + if (active) setInnerOptions(parent.children) } catch (error) { console.error('Error loading data:', error) } } - if (lazy) load() - }, [lazy]) + if (lazy) load() + return () => { + active = false + } + }, [lazy, innerValue, onLoad])
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
src/packages/cascader/cascader.taro.tsx(1 hunks)src/packages/popup/popup.taro.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: build
- GitHub Check: test
🔇 Additional comments (2)
src/packages/popup/popup.taro.tsx (1)
171-174: 阻止关闭图标点击冒泡修复“点穿”:通过在关闭图标点击中添加
e.stopPropagation()能有效避免冒泡触发 Overlay 的点击关闭逻辑,符合预期场景。LGTM。src/packages/cascader/cascader.taro.tsx (1)
165-170: 对子节点赋值增加空值保护:通过
if (parent) parent.children = pane能避免在上一轮返回undefined时的运行时异常,修复懒加载链路中层级不存在的报错问题。LGTM。
🤔 这个变动的性质是?
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit