迹忆客 专注技术分享

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

下面是一个产生该错误的示例

import {useState} from 'react';

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

  useEffect(() => {
    console.log('Count is: ', count);
  }, [count]);

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

export default App;

在上面代码中，我们看到在使用 useEffect 之前，我们并没有提前对其进行导入。如果我们运行上面的代码将产生如下的错误

为了解决这个错误，我们只需要在使用 useEffect 之前导入它就可以了。

import {useEffect, useState} from 'react';

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

  useEffect(() => {
    console.log('Count is: ', count);
  }, [count]);

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

export default App;

useEffect 钩子可以使用命名导入方式从 react 包中导入。

import {useEffect} from 'react';

useEffect 钩子将函数和依赖项数组作为参数。

每次依赖项之一发生更改时，都会重新运行该函数。

如果我们只想在组件挂载时调用该函数，请将一个空的依赖项数组传递给钩子。

useEffect(() => {
  console.log('Only runs on mount');
}, []); // 👈️ 空依赖数组

如果我们需要在组件卸载时运行一些逻辑，请从 useEffect 返回一个函数。

useEffect(() => {
  console.log('Only runs on mount');

  return () => {
    console.log('Only runs on unmount')
  }
}, []); // 👈️ 空依赖数组

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

如文档所述：

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