reactjs - 无法在顶层调用 React Hook “useState”。必须在 React 函数组件或自定义 React Hook 函数中调用 React Hooks

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

你不能在顶层调用 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>
  );
}