React创建Custom Hook实现句首大写转换无输出问题排查

你现在的代码有两个核心问题，直接导致无法渲染预期结果：

1. 代码块标注错位：你标注为「自定义Hook相关代码」的内容实际是输入框组件代码，标注为「调用该Hook的输入框组件代码」的内容才是你写的转换逻辑，且这个转换逻辑本质是普通字符串处理函数，不符合React自定义Hook的命名和实现规范。
2. 组件内用普通var变量存储输入值，直接赋值不会触发React组件重渲染：React只有在状态（useState/useReducer）更新、props变化的时候才会重新执行组件渲染逻辑，普通变量修改后React感知不到变化，不会更新视图，每次重渲染时text还会被重置为初始的空字符串，所以永远看不到转换结果。

转换逻辑（usePascalCase.js） #

你写的转换逻辑本身是符合句首大写需求的，只需要补全空值边界处理，按Hook规范调整命名为小驼峰即可：

export default function usePascalCase(str) {
  // 空输入直接返回空字符串，避免边界异常
  if (!str) return "";
  const firstCharacter = str.charAt(0).toUpperCase();
  const restCharacters = str.substring(1).toLowerCase();
  return firstCharacter + restCharacters;
}

注：如果这个逻辑不需要依赖React其他Hook能力，完全可以作为普通工具函数使用，不需要强行封装为自定义Hook。

输入框组件（TextBoxDemo.jsx） #

核心是把普通变量替换为useState管理的状态，给textarea绑定受控值：

import { useState } from "react";
import usePascalCase from "../CustomHooks/UsePascalCase";

export default function TextBoxDemo() {
  // 用useState声明输入状态，初始值为空字符串
  const [text, setText] = useState("");

  const handleOnInputEntry = (e) => {
    // 调用状态更新方法修改值，触发组件重渲染
    setText(e.target.value);
  };

  const formattedText = usePascalCase(text);

  return (
    <>
      <textarea value={text} onChange={handleOnInputEntry}></textarea>
      <span>{formattedText}</span>
    </>
  );
}

• React自定义Hook必须以use小驼峰开头命名（比如usePascalCase，不能写大驼峰UsePascalCase），这是React识别Hook的核心规则。
• 所有会影响视图变化的可变值，必须用useState/useReducer声明为组件状态，直接修改普通变量永远不会触发视图更新。
• 受控表单组件建议同时绑定value属性和onChange事件，避免输入值和状态不一致的问题。

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