React Hook“useState”在 function “nav”中被調用，它既不是 React function 組件也不是自定義 React Hook function

Question

import {useState} from 'react'

const nav = () => {
  const [activeNav, setActiveNav] = useState('#')
}

我試圖建立一個導航欄。 我收到這個錯誤我不知道為什么

React Hook "useState" is called in function "nav" 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

Answer 1

基本上，似乎以下一項或兩項是您問題的原因：

1. nav不是有效的 React 組件。 React 組件是大寫的。
2. nav可能不會呈現為 React 組件。

重命名為Nav ，這樣它至少可以正確命名。

import {useState} from 'react'

const Nav = () => {
  const [activeNav, setActiveNav] = useState('#');

  ...

  return (
    // return valid JSX
  );
}

將Nav渲染為 React 組件：

• 有效的

   <Nav />

• 無效的

   {Nav()}