代码之家 › 专栏 › 技术社区 › 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);
  };
}, []);

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

3 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

4 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

4 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

4 月前

Luckkks · 过渡色工作不正常

4 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

4 月前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

4 月前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

4 月前

noblerare · Vite错误-未定义导出(SSR)

4 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

4 月前