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

推荐文章

Selcukusu · 为什么在show-axios-react之后无法清除错误消息

3 年前

Carlos Henrique R. Pereira · 我的API请求有效,但无法访问内容

3 年前

K'man Amuda Jr. · React-Hook useEffect接收到依赖项未知的函数。传递内联函数,而不是1个警告

3 年前

Ivana Murray · react app中的地理代码未更新地图react

3 年前

Foobar · 如果我没有在useEffect数组中包含依赖项,那么它在闭包中会过时吗?

3 年前

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

3 年前

Ben Fisher · 复选框状态未即时更新

3 年前

Quatban Taco · 在React控制的输入上只听一次更改

3 年前

Ren Jitsm · React useeffect显示组件安装2次

3 年前

Chris Garsonn · 为什么即使我更改了数据,useEffect仍能工作两次?

3 年前