React文本组件统计字符时text.length报undefined问题排查

• 组件中声明text状态时，useState()未传入任何初始参数，组件首次渲染阶段text的值为undefined
• 渲染文本统计区域时直接执行text.length，undefined类型本身不存在length属性，因此触发属性不存在的报错
• 现有代码还存在单词统计逻辑缺失的问题，统计段落的<p>标签内未实现单词数计算逻辑

• 给useState传入空字符串''作为初始值，保证首次渲染时text为字符串类型，可正常读取length属性，同时也能消除React对textarea绑定值为undefined的警告
• 补充单词统计逻辑：先通过trim()去除文本首尾空格，若处理后为空则单词数为0，否则按空白符分割后统计有效片段数量，避免把首尾空格、连续空格识别为有效单词
• （可选兜底）给转大写方法增加空值判断，避免极端场景下undefined调用toUpperCase触发报错

修复后的完整代码如下：

import React, { useState } from 'react'

export default function TextForm(props) {
  // 初始化状态传入空字符串作为默认值
  const [text, setText] = useState('');
  
  const upperCase = () => {
    console.log("On click is called!");
    // 增加空值兜底
    let newText = (text || '').toUpperCase();
    setText(newText);
  }
  
  const handleOnChange = (event) => {
    console.log("On change is called!");
    setText(event.target.value);
  }

  return (
    <>
    <div className="container">
      <label htmlFor="exampleFormControlTextarea1" className="form-label">{props.heading}</label>
      <textarea className="form-control" value={text} onChange={handleOnChange} id="exampleFormControlTextarea1" rows="10"></textarea>
      <button onClick={upperCase} className="btn btn-primary">Convert to Uppercase</button>
    </div>
    <div className="container my-2">
      <h3>Your Text Summary</h3>
      {/* 补充单词统计逻辑，正常读取字符长度 */}
      <p>
        {text.trim() === '' ? 0 : text.trim().split(/\s+/).length} words and {text.length} characters
      </p>
    </div>
    </>
  )
}

内容的提问来源于stack exchange，提问作者sam