代码之家 › 专栏 › 技术社区 › Nathan Huber

如何在React 18中使用“useEffect”

use-effect sass reactjs javascript

-1

Nathan Huber · 技术社区 · 4 年前

我正在关注youtube教程,教程使用的是React 17,我使用的是React 18。我在一个部分,我们正在格式化一些动画文本,一切都正常,但我的部分是设置句子的字母在悬停时改变。我发现以下错误:

多姆。发展js:86警告:useEffect不能返回除用于清理的函数之外的任何内容。你回来了:2

下面是给我带来问题的代码片段:

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

以下是文本动画悬停类的SCS:

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

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

我读到我不需要在React 18中使用“useEffect”,但我不明白我应该做什么。我所做的大部分搜索都返回了许多使用“useEffect”的实例,其中包含“async”问题,我很难将这些问题与我的特定问题联系起来。

我非常感谢你的帮助。

-N8

2 回复 | 直到 4 年前

Mihail Vratchanski 4 年前

从useEffect中删除返回,如下所示:

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

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

Inder 4 年前

在卸载组件时,应始终清除超时或任何间隔。

useEffect(() => {
  let timeout;

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

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

推荐文章