fix: 修复useActive 中 items 为空数组导致的异常 #824
Conversation
📝 Walkthrough""" Walkthrough本次更改在 Changes
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. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Walkthrough: 该PR修复了在 Changes:
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
components/suggestion/useActive.ts
Outdated
| @@ -117,6 +117,7 @@ export default function useActive( | |||
| }); | |||
|
|
|||
| React.useEffect(() => { | |||
| if(items?.length === 0) return; | |||
There was a problem hiding this comment.
添加了对items为空数组的检查，确保在items为空时提前返回，避免后续对空数组的操作。这是一个重要的修复，防止了潜在的运行时错误。
|
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
components/suggestion/useActive.ts (1)
119-124: 逻辑修复正确，防止了空数组导致的异常修改增加了一个守卫条件，当
items为空数组或未定义时直接返回，避免了在items为空时访问items[0].value导致的类型错误。这是一个必要的防御性编程措施。不过有一点小建议：可以考虑使用
if (!items?.length)作为条件判断，这样更简洁，且同样能处理items为undefined/null的情况。- if(items?.length === 0) return; + if (!items?.length) return;
|
使用当中存在错误，直接导致崩溃 |
components/suggestion/useActive.ts
Outdated
| // 确保 items 是一个数组且至少有一个元素 | ||
| if (!Array.isArray(items) || items.length === 0) return; | ||
| if (open) { | ||
| setActivePaths([items[0].value]); | ||
| } |
There was a problem hiding this comment.
| // 确保 items 是一个数组且至少有一个元素 | |
| if (!Array.isArray(items) || items.length === 0) return; | |
| if (open) { | |
| setActivePaths([items[0].value]); | |
| } | |
| if (open && Array.isArray(items) && items.length > 0) { | |
| setActivePaths([items[0].value]); | |
| } |
|
补充一个测试用例吧。 |
Bundle ReportChanges will increase total bundle size by 232.88kB (171.19%) ⬆️
Affected Assets, Files, and Routes:view changes for bundle: antdx-array-pushAssets Changed:
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
components/suggestion/__tests__/useActive.test.tsx (1)
1-60: 测试覆盖度完整，建议考虑添加更多场景整体测试文件很好地覆盖了 PR 中修复的问题。建议考虑添加以下测试场景来进一步提高测试覆盖度：
- 测试
items参数变化时的行为- 测试
open从false变为true时的行为- 测试具有嵌套
children的复杂items结构it('should update activePaths when items changes', () => { const initialItems: SuggestionItem[] = [{ label: 'Item 1', value: 'item1' }]; const newItems: SuggestionItem[] = [{ label: 'New Item', value: 'new-item' }]; const { result, rerender } = renderHook( ({ items }) => useActive(items, true, false, jest.fn(), jest.fn()), { initialProps: { items: initialItems } } ); expect(result.current[0]).toEqual(['item1']); rerender({ items: newItems }); expect(result.current[0]).toEqual(['new-item']); });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
components/suggestion/__tests__/useActive.test.tsx(1 hunks)components/suggestion/useActive.ts(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- components/suggestion/useActive.ts
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: afc163
PR: ant-design/x#0
File: :0-0
Timestamp: 2025-04-11T14:47:09.527Z
Learning: 当评审 ant-design/x 仓库中的 PR 时，需要用中文回复中文评论。该项目的文档支持中英双语。
Learnt from: afc163
PR: ant-design/x#0
File: :0-0
Timestamp: 2025-04-11T14:47:09.527Z
Learning: 当评审 ant-design/x 仓库中的 PR 时，需要用中文回复中文评论。该项目的文档支持中英双语。
🧬 Code Graph Analysis (1)
components/suggestion/__tests__/useActive.test.tsx (3)
components/suggestion/index.tsx (1)
SuggestionItem(15-24)tests/utils.tsx (1)
renderHook(41-53)components/suggestion/useActive.ts (1)
useActive(8-127)
🔇 Additional comments (5)
components/suggestion/__tests__/useActive.test.tsx (5)
1-4: 导入语句正确，测试设置合理使用
@testing-library/react的renderHook是测试 React hooks 的标准做法，导入的类型和函数都是正确的。
7-17: 测试用例覆盖正常场景这个测试用例正确验证了当
open为true且items为有效数组时，activePaths应该初始化为第一个项目的值。测试逻辑清晰，断言正确。
19-26: 测试用例验证 open 为 false 的情况这个测试用例正确验证了当
open为false时，无论items是否有效，activePaths都应该保持空数组。这验证了守卫条件的第一部分。
28-33: 核心测试用例：验证空数组场景这个测试用例直接验证了此次修复的核心问题 - 当
items为空数组时，activePaths应该保持空数组而不是抛出异常。这是防止应用崩溃的关键测试。
35-59: 全面测试边界情况这个测试用例非常全面地覆盖了各种无效输入场景：
null值undefined值- 非数组值
这些测试确保了
Array.isArray()检查的有效性，提高了代码的健壮性。测试结构清晰，每个子场景都有独立的断言。
Summary by CodeRabbit