如何在不破坏我的 React 应用程序的情况下使用 reactjs useState 钩子？答案

【问题标题】：How can I use reactjs useState hook without broke my react app?如何在不破坏我的 React 应用程序的情况下使用 reactjs useState 钩子？
【发布时间】：2023-02-24 02:39:25
【问题描述】：

当我尝试添加我的 Home-index.js useEffect 时，我的网页完全消失了。这是我的代码。

索引.js

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

索引.scss

.text-animate-hover {
    min-width: 10px;
    display: inline-block;
    animation-fill-mode: both;
  
    &:hover {
      animation: rubberBand 1s;
      color: #ff4f00;
    }
  }

【问题讨论】：

这不足以理解您的错误。您能否提供您的 index.js 代码的完整版本？
查看指南以提高未来问题的质量。您可以先将其应用于您的问题！ stackoverflow.com/help/how-to-ask

标签： reactjs

【解决方案1】：

您不应该从 useEffect 返回 setTimeout 的结果。 useEffect 期望您返回一个稍后将调用的清理函数。在此处查看文档：https://reactjs.org/docs/hooks-effect.html#effects-with-cleanup

要解决此问题，您需要删除 return 语句：

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

【讨论】：

谢谢。那就是解决我的问题。

【解决方案2】：

好吧，我认为如果您将状态值添加为类之一，它应该可以工作。

索引.js

const [letterClass, setLetterClass] = useState('')

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

<div className={`${letterClass}`}>Something here...</div>

【讨论】：

【解决方案3】：

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

},[])

【讨论】：