如何在 React 18 中使用“useEffect”答案

【问题标题】：How do I use 'useEffect' in React 18如何在 React 18 中使用“useEffect”
【发布时间】：2022-07-15 05:40:04
【问题描述】：

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

react-dom.development.js:86 警告：useEffect 不得返回除用于清理的函数之外的任何内容。您返回：2

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

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

这是我的 text-animate-hover 类的 scss：

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

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

我读到我不需要在 React 18 中使用“useEffect”，但我不明白我应该做什么。我所做的大部分搜索都返回了很多使用“useEffect”和“异步”问题的实例，我无法将这些与我的具体问题联系起来。

感谢您对此提供的任何帮助。

-N8

【问题讨论】：

这个和react 18没有关系

标签： javascript reactjs sass use-effect

【解决方案1】：

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

useEffect(() => {
  let timeout;

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

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

【讨论】：

【解决方案2】：

从useEffect中去掉return，像这样：

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

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

【讨论】：

谢谢 Mihail，这非常有帮助。这让我紧张了一段时间。谢谢！
我的荣幸，快乐的学习。 :)

【解决方案3】：

问题不在于回报。因为在 Slobodan 的教程中，他实际上打算在组件卸载时运行它。不幸的是，这在 React 18 中是不可能的，并且在组件挂载时也不会只运行一次，因为在 React 18 中，useEffect 实际上运行了两次，因为组件也挂载了两次。在 useEffect 中使用一个简单的 console.log，您可以看到发生了什么。

错误的 React 18 方法。测试：

const MyTestComponent = () => {
  useEffect(()=>{
    console.log('component mounted') //This will actually output twice.
  },[])
  return <div>test component</div>
}

正确的 React 18 方法。实际代码：

const About = () => {
 const [letterClass, setLetterClass] = useState('text-animate')
 const mountFlag = useRef(false) //here I am creating a flag

 useEffect(() => {
  if (!mountFlag.current) { //using the flag to check if component mounted
   mountFlag.current = true //updating flag
   setTimeout(() => {
    setLetterClass('text-animate-hover')
   }, 3000)
  }
 }, [])

 return <div>Component</div>
}

这实际上是版本问题，顺便说一句很常见。发生这种情况的原因是 Slobodan 使用不同版本的 React 制作了他的教程。我鼓励大家修改关于这个问题的文档，因为它肯定会破坏很多人的新应用程序。

在这里我们可以看到 David Khourshid 谈论它： https://www.youtube.com/watch?v=HPoC-k7Rxwo

【讨论】：