我如何在 React 18 中使用 'useEffect'

Question

我正在关注一个 youtube 教程，该教程使用的是 React 17，我使用的是 React 18。我在格式化一些动画文本的部分，一切正常，但是我正在进行的部分是将句子的字母设置为在悬停时改变。我收到以下错误：

react-dom.development.js:86 警告：useEffect 不能 return 除了用于清理的函数之外的任何东西。你 returned: 2

这是给我带来问题的代码片段：

  useEffect(() => {
    return setTimeout(() => {
      setLetterClass('text-animate-hover')
    }, 4000)
  }, [])

这是我的 text-animate-hover 的 scss class:

  .text-animate-hover {
    min-width: 10px;
    display: inline-block;
    animation-fill-mode: both;

    &:hover {
      animation: rubberBand 1s;
      color: #ffd700;
    }
  }

我读到我不需要将 'useEffect' 与 React 18 一起使用，但我不明白我应该做什么。我所做的大部分搜索都是 return 编辑了很多使用 'useEffect' 和 'async' 问题的实例，我无法将这些与我的具体问题联系起来。

非常感谢对此的任何帮助。

-N8

Answer 1

从useEffect中移除return，像这样：

  useEffect(() => {
    setTimeout(() => {
      setLetterClass('text-animate-hover')
    }, 4000);
  }, []);

您可以在此处阅读有关 useEffect 的更多信息：https://reactjs.org/docs/hooks-effect.html

Answer 2

您应该始终清除组件卸载的超时或任何时间间隔。

useEffect(() => {
  let timeout;

  timeout = setTimeout(() => {
    setLetterClass("text-animate-hover");
  }, 4000);

  return () => {
    clearTimeout(timeout);
  };
}, []);

我如何在 React 18 中使用 'useEffect'

How do I use 'useEffect' in React 18

javascript

sass

reactjs

use-effect