React.js代码中{text.length}无法获取动态state文本长度问题求助

报错的核心原因是useState声明状态时未设置初始值，组件首次渲染阶段text的值为undefined。此时页面还未等到用户输入触发onChange事件更新状态，就先执行了{text.length}的渲染逻辑，同时转大写按钮的点击逻辑里也直接调用了text.toUpperCase()，对undefined类型值访问属性、调用方法会直接抛出类型错误，导致页面无法正常运行。

• 最规范的修复方式：给文本状态设置符合业务场景的初始值，将状态声明代码从const [text,setText]=useState();修改为const [text,setText] = useState('');。初始值设为空字符串后，首次渲染时text.length会正常返回0，text.toUpperCase()执行也不会报错，完全匹配输入框的初始空状态逻辑。
• 可选兜底方案：如果存在状态初始值无法确定类型的特殊场景，可以在访问属性时增加可选链与空值兜底，比如渲染时写{text?.length || 0}，转大写逻辑前增加非空判断，但对当前受控输入框场景来说，直接给空字符串初始值是最优写法，不需要额外冗余判断。

import React, { useState } from 'react';
export default function TextForm(props){
    const [text, setText] = useState('');

    const toUppercase = () => {
        console.log("button is clicked");
        let newText = text.toUpperCase();
        setText(newText);
    }

    const changingText = (event) => {
        setText(event.target.value)
    }

    return(
        <>
        <div className="container">
            <h1>{props.heading}</h1>
            <div className="mb-3">
              <textarea className="form-control" id="txtarea" rows="10" value={text} placeholder="Enter Your text here" onChange={changingText}></textarea>
            </div>
            <button className="btn btn-primary" onClick={toUppercase}>Click to convert to uppercase</button>
        </div>
        <div className="container my-2">
            <h1>Your text summary</h1>
            <p>{text.length} is number of character</p>
        </div>
        </>
    )
}

内容的提问来源于stack exchange，提问作者Dhruv B.