如何修复React Hook useState报错：textForm不符合组件/钩子规范

情况1：textForm 是React函数组件 #

React要求函数组件名称必须以大写字母开头，才能被识别为合法组件并允许内部调用Hook。只需将函数名改为首字母大写的TextForm即可：

function TextForm() {
  const [text, setText] = useState("");
  // 组件业务逻辑
  return <div>{text}</div>;
}

// 在其他组件中正常使用
function App() {
  return <TextForm />;
}

情况2：textForm 是自定义Hook函数 #

自定义Hook的命名规则要求必须以use开头，这样React才能识别它为合法的Hook，允许内部嵌套调用其他Hook。将函数名改为useTextForm即可：

function useTextForm() {
  const [text, setText] = useState("");
  // Hook内部逻辑，比如封装文本处理方法
  const handleTextChange = (newValue) => {
    setText(newValue.trim());
  };
  return { text, handleTextChange };
}

// 在任意组件中调用这个自定义Hook
function InputComponent() {
  const { text, handleTextChange } = useTextForm();
  return (
    <input
      type="text"
      value={text}
      onChange={(e) => handleTextChange(e.target.value)}
    />
  );
}

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