React中使用useState触发react-hooks/rules-of-hooks错误的解决方法咨询

这个错误其实已经把问题点说得很明确了，我们来拆解一下核心原因：

X ERROR src\Form.js Line 9:29: React Hook "React.useState" is called in function "form" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use" react-hooks/rules-of-hooks

问题出在你的组件名称是小写的form——React有个硬性约定：所有React函数组件的名称必须以大写字母开头。如果用小写开头，React会把它当作普通的JavaScript函数，而不是React组件，这时候在里面使用Hook就违反了Hook的使用规则。

修复步骤非常简单： #

只需要把组件名改成大写开头的Form即可，修改后的完整代码如下：

import React, { useState } from "react";
import "../App.css";

// 将小写的form改为大写开头的Form
export default function Form() {
  const changeValue = (event) => {};
  const [text, setName] = useState("enter here");
  return (
    <>
      <div className="my-3">
        <textarea className="form-control" placeholder="enter text here" rows="10"></textarea>
      </div>
      <button className="btn btn-success">Convert to upper case</button>
      <button className="btn btn-success">Convert to lower case</button>
      <button className="btn btn-danger">clear</button>
      <hr />
      <p>string have </p>
    </>
  );
}

额外补充说明： #

这个规则是React官方的约定，同时也是ESLint规则react-hooks/rules-of-hooks的检查项，目的是让React能够准确区分组件和普通函数，确保Hook在正确的上下文里被调用。另外如果是自定义Hook，名称必须以use开头（比如useFormInput），这样ESLint也能正确识别它是Hook并进行规则校验。

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