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

如何在React 18中使用“useEffect”

use-effect sass reactjs javascript

-1

Nathan Huber · 技术社区 · 3 年前

我正在关注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 回复 | 直到 3 年前

Mihail Vratchanski 3 年前

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

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

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

Inder 3 年前

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

useEffect(() => {
  let timeout;

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

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

推荐文章

delves · Sass不识别变量

2 年前

Nathan Huber · 如何在React 18中使用“useEffect”

3 年前

Janosz ÐÑÐ°ÑÐ¸ÑÐ½Ð¸Ðº · 如何瞄准这个i标签

3 年前

Henry · scss或css中的calc函数不起作用

3 年前

Nam Van · 如何在React中使用自定义主题颜色。js,CSS(SCSS)模块,Bootstrap5

3 年前

rook99 · 无法加载图标的字体

6 年前

Glen Elkins · SASS新手-不编译

6 年前

Toki · SASS在Sublime Text-Compile main中。保存任何@导入文件时的scss

6 年前

zed · 防止SCS编译CSS变量-Angular CLI

6 年前

sliptype · 使用Webpack提取CSS时抑制模块输出

6 年前