修复 React 中 Uncaught ReferenceError: useState is not defined 错误

当我们在代码中使用 useState 钩子但忘记导入它时，会产生错误 “Uncaught ReferenceError: useState is not defined”。 要解决该错误，需要在使用前导入钩子 – import {useState} from 'react' 。

// ?️ 导入 useState 钩子
import {useState} from 'react';

const App = () => {
  const [count, setCount] = useState(0);

  const handleClick = event => {
    setCount(current => current + 1);
  };
  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

export default App;

当我们在代码中使用 useState 钩子而不先导入它时，会发生“’useState’ is not defined no-undef”错误。

useState 钩子可以作为命名导入从 react 包中导入。

import {useState} from 'react';

该钩子返回一个数组，其中第一个元素是状态变量，第二个元素是可用于更新状态的 setState 函数。

useState 钩子可以传递一个初始状态值作为参数。

const [count, setCount] = useState(0);

上面的示例将计数状态变量的初始值设置为 0。

我们可以使用 setCount 函数来更新状态。

const [count, setCount] = useState(0);

setCount(100);

当使用前一个状态计算下一个状态时，我们可以将一个函数传递给 setState。

const [count, setCount] = useState(0);

setCount(current => current + 1);

我们向 setState 传递了一个函数，因为该函数保证以当前（最新）状态调用。

否则，如果我们可以访问的状态变量不代表最新的值，我们可能会遇到一些奇怪的竞争条件。

请注意，使用 React 钩子时有一些规则。

• 仅从 React 函数组件或自定义钩子调用钩子。
• 只在顶层调用钩子
• 不要在循环、条件或嵌套函数中调用钩子
• 在任何提前返回之前，始终在 React 函数的顶层使用钩子

火焰兔

海报 链接