修复 Textarea 设置为 null 时，显示字数限制显示错误问题 by myltx · Pull Request #1004 · Moonofweisheng/wot-design-uni

myltx · 2025-04-11T03:04:20Z

🤔 这个 PR 的性质是？(至少选择一个)

🔗 相关 Issue

💡 需求背景和解决方案

需求背景

使用Textarea组件时，启用了show-word-limit，调用接口返回的值为null时，显示字数限制为4，测试过程中使用 undefined 显示是正常的，然后查看源码发现问题出在了组件中 formatValue函数处理的时候返回将 null,转换成了字符串 'null'，导致在计算 currentLength 的时候显示字数限制为4。

解决方案

修改wd-textarea 组件中的formatValue方法
添加了 if (value === null || value === undefined) return ''

function formatValue(value: string | number) {
  if (value === null || value === undefined) return ''
  const { maxlength, showWordLimit } = props
  if (showWordLimit && maxlength !== -1 && String(value).length > maxlength) {
    return value.toString().substring(0, maxlength)
  }
  return `${value}`
}

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项。⚠️

文档已补充或无须补充
代码演示已提供或无须提供
TypeScript 定义已补充或无须补充

Summary by CodeRabbit

Bug Fixes
- 修正了文本区域在处理空或异常输入时字符计数不准确的问题，确保显示结果更加精确。
Refactor
- 优化了组件内部逻辑，提升了稳定性和鲁棒性，为用户提供更顺畅的输入体验。

✅ Closes: Moonofweisheng#1003

vercel · 2025-04-11T03:04:24Z

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

Name	Status	Preview	Comments	Updated (UTC)
wot-design-uni	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 11, 2025 3:06am

coderabbitai · 2025-04-11T03:04:30Z

Walkthrough

该PR对 wd-textarea 组件进行了两项主要修改。首先，调整了 currentLength 计算属性中对 props.modelValue 的处理方式，移除了对空字符串的默认回退。其次，在 formatValue 函数中增加了对 null 和 undefined 的检测，确保遇到这些情况时返回空字符串，从而增强了错误处理机制。

Changes

文件路径	变更概要
src/uni_modules/.../wd-textarea.vue	调整 `currentLength` 计算逻辑及增强 `formatValue` 函数对于 `null`/`undefined` 的处理

Sequence Diagram(s)

sequenceDiagram
    participant C as wd-textarea 组件
    participant CP as currentLength 计算属性
    participant FV as formatValue 函数
    C->>CP: 读取 modelValue
    CP->>FV: 调用 formatValue(modelValue)
    FV->>FV: 检查是否为 null/undefined
    FV-->>CP: 返回格式化后的值（空字符串或原值）
    CP->>CP: 用 Array.from() 计算字符长度

Possibly related issues

[Bug 上报] Textarea 组件 show-word-limit 字数显示异常 #1003：该 issue 涉及 null 和 undefined 值的错误处理问题，本次改动通过增强 formatValue 的逻辑直接解决了该问题。

Possibly related PRs

fix: 🐛 wd-textarea组件maxlength限制长度无效 #558：本次改动与该 PR 在 currentLength 和 formatValue 逻辑调整上具有直接代码关联。
fix: 🐛 修复textarea统计多码元字符长度错误的问题 #940：此次修改处理了与 modelValue 值相关的计算问题，与该 PR 存在相似的代码修改内容。

Suggested reviewers

Moonofweisheng

Poem

我是一只小兔子，跳跃在代码林中，
格式化如春风，拂去错误多重，
null与undefined不再迷茫，
每一行代码闪亮如星，
愿这改变带来新希望！
🐇💕

Tip

⚡💬 Agentic Chat (Pro Plan, General Availability)

We're introducing multi-step agentic chat in review comments and issue comments, within and outside of PR's. This feature enhances review and issue discussions with the CodeRabbit agentic chat by enabling advanced interactions, including the ability to create pull requests directly from comments and add commits to existing pull requests.

📜 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 f137a63 and ced5288.

📒 Files selected for processing (1)

src/uni_modules/wot-design-uni/components/wd-textarea/wd-textarea.vue (2 hunks)

🔇 Additional comments (3)

src/uni_modules/wot-design-uni/components/wd-textarea/wd-textarea.vue (3)

184-184: 修复了计算文本长度的逻辑

这里移除了对空值的默认回退逻辑，而是改为直接将 formatValue(props.modelValue) 的结果转为字符串。这个修改配合 formatValue 函数的改动，能够正确处理 null 值的情况，确保当值为 null 时不会错误显示为 "null" 字符串的长度（4）。

227-227: 增加了对 null 和 undefined 的处理逻辑

这个改动很好地解决了 PR 中描述的问题，当 Textarea 值为 null 时显示的字数限制错误问题。通过显式地检查 null 和 undefined 值，并在这些情况下返回空字符串，确保了字数限制计算的正确性。

184-184: 综合评价：解决了 null 值处理的问题

这两处修改共同作用，完美解决了当 Textarea 的值为 null 时，字数限制显示错误的问题：

在 formatValue 函数中增加了对 null 和 undefined 的特殊处理

修改了 currentLength 计算属性的实现，确保正确计算字符串长度

这些修改符合 PR 的目标，修复了 Issue #1003 中描述的问题。

Also applies to: 227-227

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

🪧 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.
- Generate unit testing code for this file.
- 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 generate unit testing code for this file.
- @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 generate unit testing code.
- @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.

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 resolve resolve all the CodeRabbit review comments.
@coderabbitai plan to trigger planning for file edits and PR creation.
@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.

petercat-assistant · 2025-04-11T03:04:37Z

概述

此 PR 修复了当 Textarea 组件的值为 null 时，字数限制显示错误的问题。通过修改 wd-textarea 组件中的 formatValue 方法，确保当值为 null 或 undefined 时返回空字符串，从而避免错误的字数计算。

变更

文件	概要
src/uni_modules/wot-design-uni/components/wd-textarea/wd-textarea.vue	修改 `formatValue` 方法以处理 null 和 undefined 值，确保返回空字符串，修复字数限制显示错误的问题。

petercat-assistant · 2025-04-11T03:04:40Z

   * @link https://github.com/Moonofweisheng/wot-design-uni/issues/933
   */
-  return Array.from(String(formatValue(props.modelValue) || '')).length
+  return Array.from(String(formatValue(props.modelValue))).length


The change from String(formatValue(props.modelValue) || '') to String(formatValue(props.modelValue)) is correct because the formatValue function now handles null and undefined values by returning an empty string, making the || '' redundant.

netlify · 2025-04-11T03:04:42Z

✅ Deploy Preview for wot-design-uni ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`ced5288`
🔍 Latest deploy log	https://app.netlify.com/sites/wot-design-uni/deploys/67f886b770586a0008b5d675
😎 Deploy Preview	https://deploy-preview-1004--wot-design-uni.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

myltx added 2 commits April 11, 2025 10:54

fix: 🐛 修复 Textarea 设置为 null 时，显示字数限制显示错误问题

db0a546

✅ Closes: Moonofweisheng#1003

Merge branch 'Moonofweisheng:master' into master

ced5288

petercat-assistant Bot reviewed Apr 11, 2025

View reviewed changes

vercel Bot deployed to Preview April 11, 2025 03:06 View deployment

RJQingHuan linked an issue Apr 11, 2025 that may be closed by this pull request

[Bug 上报] Textarea 组件 show-word-limit 字数显示异常 #1003

Closed

Moonofweisheng approved these changes May 6, 2025

View reviewed changes

Moonofweisheng merged commit 60f2fe6 into Moonofweisheng:master May 6, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

修复 Textarea 设置为 null 时，显示字数限制显示错误问题#1004

修复 Textarea 设置为 null 时，显示字数限制显示错误问题#1004
Moonofweisheng merged 2 commits into
Moonofweisheng:masterfrom
myltx:master

myltx commented Apr 11, 2025 •

edited by coderabbitai Bot

Loading

Uh oh!

vercel Bot commented Apr 11, 2025 •

edited

Loading

Uh oh!

coderabbitai Bot commented Apr 11, 2025 •

edited

Loading

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

Uh oh!

petercat-assistant Bot commented Apr 11, 2025

Uh oh!

petercat-assistant Bot Apr 11, 2025

Uh oh!

netlify Bot commented Apr 11, 2025 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

myltx commented Apr 11, 2025 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🤔 这个 PR 的性质是？(至少选择一个)

🔗 相关 Issue

💡 需求背景和解决方案

需求背景

解决方案

☑️ 请求合并前的自查清单

Summary by CodeRabbit

Uh oh!

vercel Bot commented Apr 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Apr 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Possibly related issues

Possibly related PRs

Suggested reviewers

Poem

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

petercat-assistant Bot commented Apr 11, 2025

概述

变更

Uh oh!

petercat-assistant Bot Apr 11, 2025

Choose a reason for hiding this comment

Uh oh!

netlify Bot commented Apr 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for wot-design-uni ready!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

myltx commented Apr 11, 2025 •

edited by coderabbitai Bot

Loading

vercel Bot commented Apr 11, 2025 •

edited

Loading

coderabbitai Bot commented Apr 11, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

netlify Bot commented Apr 11, 2025 •

edited

Loading