fix useWatch not updating

[crazyair]

Summary by CodeRabbit

• 文档
  • 新增了关于 useWatch 在嵌套列表场景下用法的示例文档和代码示例。
• 功能优化
  • 简化了表单监听回调 WatchCallBack 的参数，移除了 namePathList，仅保留 values 和 allValues。
  • 优化了表单内部通知监听的实现，统一回调参数，提升一致性。
• 样式与重构
  • 优化了 useWatch 相关变量命名和依赖，提升代码可读性和稳定性。

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
field-form	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 22, 2025 0:58am

[coderabbitai[bot]]

Walkthrough

本次变更新增了一个关于 useWatch 的嵌套列表级别用法的文档和示例，调整了 useForm 和 interface 中 Watch 回调的参数签名，简化了通知逻辑，并对 useWatch 的实现细节进行了小幅优化。

Changes

文件/分组	变更摘要
docs/demo/useWatch-list-level2.md	新增文档，介绍 useWatch-list-level2 用法并引用对应示例。
docs/examples/useWatch-list-level2.tsx	新增 React 示例，演示 rc-field-form 中 useWatch 嵌套列表用法。
src/interface.ts	WatchCallBack 类型签名移除 namePathList 参数，仅保留两个参数。
src/useForm.ts	FormStore.notifyWatch 方法签名简化，不再传递 namePathList。
src/useWatch.ts	变量命名优化，useEffect 依赖项补充，去除多余空行。

Sequence Diagram(s)

sequenceDiagram
    participant User as 用户
    participant Demo as Demo 组件
    participant Form as Form
    participant Child as Child 组件
    participant useWatch as useWatch Hook

    User->>Demo: 添加/删除列表项
    Demo->>Form: 渲染 Form.List
    Form->>Child: 渲染每个列表项
    Child->>useWatch: 订阅 name 字段变化
    useWatch->>Form: 注册 Watch 回调
    User->>Form: 修改 name 字段
    Form->>useWatch: 通知回调（仅传递 values, allValues）
    useWatch->>Child: 更新当前 name 值显示

Suggested reviewers

• zombieJ

Poem

🐇
新增文档与示例，嵌套列表真灵巧，
Watch 回调更简约，参数减少无烦恼。
代码微调细又妙，
表单世界兔儿跳，
春风一吹乐逍遥！

[!WARNING] There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

docs/examples/useWatch-list-level2.tsx

Oops! Something went wrong! :(

ESLint: 8.57.1

ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct.

The config "prettier" was referenced from the config file in "/.eslintrc.js".

If you still have problems, please stop by https://eslint.org/chat/help to chat with the team.

src/useForm.ts

Oops! Something went wrong! :(

ESLint: 8.57.1

ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct.

The config "prettier" was referenced from the config file in "/.eslintrc.js".

If you still have problems, please stop by https://eslint.org/chat/help to chat with the team.

src/useWatch.ts

Oops! Something went wrong! :(

ESLint: 8.57.1

ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct.

The config "prettier" was referenced from the config file in "/.eslintrc.js".

If you still have problems, please stop by https://eslint.org/chat/help to chat with the team.

• 1 others

---

📜 Recent review details

Configuration used: CodeRabbit UI Review profile: CHILL Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6611c318e39714593243ed623e311d6c2990e510 and 3288f64d2299d98ff23b95e1b96f2f3f88ac4399.

📒 Files selected for processing (5)

• docs/demo/useWatch-list-level2.md (1 hunks)
• docs/examples/useWatch-list-level2.tsx (1 hunks)
• src/interface.ts (1 hunks)
• src/useForm.ts (6 hunks)
• src/useWatch.ts (2 hunks)

🧰 Additional context used

🧬 Code Graph Analysis (1)

docs/examples/useWatch-list-level2.tsx (1)

tests/common/InfoField.tsx (1)

• Input (9-11)

🔇 Additional comments (12)

docs/demo/useWatch-list-level2.md (1)

1-4: 文档结构清晰简洁

文档格式正确，恰当地引用了示例代码文件。

src/useWatch.ts (3)

150-150: 变量命名一致性改进

将 nextValueStr 重命名为 newValueStr 与对应的 newValue 变量保持命名一致性，提高代码可读性。

---

153-154: 正确更新字符串比较和赋值

相应地更新了字符串比较和赋值逻辑以使用新的变量名，保持代码一致性。

---

173-173: 修复 useEffect 依赖数组

在依赖数组中添加 valueStr 确保当字符串化的值发生变化时 effect 会重新执行，这对于 watch 功能的正确性至关重要。

src/interface.ts (1)

212-212: 简化 WatchCallBack 类型签名

移除了第三个参数 namePathList: InternalNamePath[]，简化了回调接口。这是一个破坏性变更，需要确保所有使用 WatchCallBack 的代码都已相应更新。

验证所有 WatchCallBack 的使用是否已正确更新：

#!/bin/bash
# 搜索 WatchCallBack 的使用，确保没有遗漏的三参数调用
rg -A 3 -B 3 "WatchCallBack|watchList\.forEach|callback\(" --type ts

src/useForm.ts (3)

205-205: 简化 notifyWatch 方法签名

移除了 namePath 参数，与简化后的 WatchCallBack 接口保持一致。

---

212-212: 更新回调调用以匹配新接口

相应地更新了 watch 回调的调用方式，只传递 values 和 allValues 参数。

---

557-557: 统一更新所有 notifyWatch 调用

所有 notifyWatch 的调用都已正确更新为无参数调用，确保与新的方法签名一致。这些更改分布在表单的各个操作中：resetFields、setFields、registerField、updateValue 和 setFieldsValue。

Also applies to: 569-569, 595-595, 645-645, 685-685, 751-751, 782-782

docs/examples/useWatch-list-level2.tsx (4)

8-10: useWatch 选择器函数使用正确

正确使用了 useWatch 的选择器函数形式来监听嵌套列表中特定索引的 name 字段值，使用 lodash 的 get 函数安全地访问深层属性。

---

7-24: Child 组件设计良好

Child 组件结构清晰，正确演示了在列表项中使用 useWatch 的模式，包含了表单字段、值显示和删除功能。

---

26-40: Demo 组件完整演示了列表级 useWatch 用法

Demo 组件提供了一个完整的示例，展示了如何在动态列表中使用 useWatch，初始值设置合理，列表操作功能完整。

---

1-5: 导入依赖合理

正确导入了必要的依赖：React、lodash get 函数、rc-field-form 组件和 Input 组件。

✨ Finishing Touches

• [ ] 📝 Generate Docstrings

🧪 Generate Unit Tests

• [ ] Create PR with Unit Tests
• [ ] Post Copyable Unit Tests in Comment

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need 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)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai auto-generate unit tests to generate unit tests for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 99.44%. Comparing base (6611c31) to head (3288f64). Report is 3 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #756   +/-   ##
=======================================
  Coverage   99.44%   99.44%           
=======================================
  Files          18       18           
  Lines        1260     1260           
  Branches      298      316   +18     
=======================================
  Hits         1253     1253           
  Misses          7        7           

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:

• :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.