迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 >

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

作者:迹忆客 最近更新:2022/05/05 浏览次数:

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

错误 useState is not defined

// 👇️ 导入 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 函数的顶层使用钩子

除非注明转载,本站文章均为原创或翻译,欢迎转载,转载请以链接形式注明出处

本文地址:

迹忆客

专注技术分享,项目实战分享!

技术宅 乐于分享 7年编程经验
社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

热门文章

教程更新

热门标签

扫码一下
查看教程更方便