React Hook \"React.useState\" 在函数 \"form\" 中调用，该函数既不是 React 函数组件也不是自定义 React Hook 函数答案

【问题标题】：React Hook "React.useState" is called in function "form" that is neither a React function component nor a custom React Hook functionReact Hook \"React.useState\" 在函数 \"form\" 中调用，该函数既不是 React 函数组件也不是自定义 React Hook 函数
【发布时间】：2022-08-07 23:55:31
【问题描述】：

我正在使用 React 钩子来获取状态，但是当我使用 useState 时，它会显示一个错误，即：

Compiled with problems: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

Search for the keywords to learn more about each error.

我使用的代码是：

import React,{ useState } from \'react\'
import \'./App.css\';
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>
        </>

    )
}

我找不到错误，谁能告诉我如何删除错误。 package.json 是：

{
  \"name\": \"text-analyzer\",
  \"version\": \"0.1.0\",
  \"private\": true,
  \"dependencies\": {
    \"@testing-library/jest-dom\": \"^5.16.2\",
    \"@testing-library/react\": \"^12.1.3\",
    \"@testing-library/user-event\": \"^13.5.0\",
    \"react\": \"^17.0.2\",
    \"react-dom\": \"^17.0.2\",
    \"react-scripts\": \"5.0.0\",
    \"web-vitals\": \"^2.1.4\"
  }

将 function form 更改为 function Form，因为 React 要求组件名称以大写字母开头。
您的问题的答案实际上在错误消息中

标签： javascript reactjs react-hooks

【解决方案1】：

它应该是Form，大写为F。 React 组件应该以大写字母开头。如果你正在创建一个自定义钩子，它应该以use 开头，比如useData。

import React, { useState } from "react";
import "./App.css";
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>
    </>
  );
}

【讨论】：

【解决方案2】：

您的 form() 将该组件名称更改为其他名称导出默认函数 form() {

} 例子

导出默认函数 Myform() {

}

注意：组件名称应以大写字母开头

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。