無法在頂層調用 React Hook“useState”。 React Hooks 必須在 React function 組件或自定義 React Hook function 中調用

Question

React Hook 不工作，給出錯誤，如附件截圖所示：-

我的代碼：-

import React, { useState} from 'react';

import WEBINAR_LIST from './webinar_data';

const [ page, setPage ] = useState(0); //create page state

const pageData = useMemo(() => {

     return WEBINAR_LIST.slice(page*5, (page*5)+5)
},[page])

const nextPage = () => setPage(prev => prev+1)
const prevPage = () => setPage(prev => prev > 0 ? prev-1 : prev) 

謝謝！

Answer 1

換句話說，您很可能需要將 const 移動到主 function 以下。對我來說，我必須將 useState 的 const 移動到 export function App 下面。

Answer 2

你不能在頂層調用 React Hooks，你需要創建一個功能組件。

在此處了解有關組件的更多信息，並在此處了解有關鈎子的更多信息。

一個功能組件看起來像這樣：

import React, { useState } from 'react';

// Create your functional component:
function Example() {
  // And now you can use hooks
  // But only inside your functional component's
  // body
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}