React Hook "React.useState" 在 function "form" 中調用，它既不是 React function 組件也不是自定義 React Hook ZC1C425268E68385D1AB5074C17A94F

Question

我正在為 state 使用 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"
  }

Answer 1

它應該是帶有大寫F的Form 。 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>
    </>
  );
}

Answer 2

您的 form() 將該組件名稱更改為其他名稱 export default function form() {

} 例子

導出默認 function Myform() {

}

注意：組件名稱應以大寫字母開頭