反应 JS |使用 setTimeout 在 Page 上打印一个数字答案

【问题标题】：React JS | using setTimeout prints a number on Page反应 JS |使用 setTimeout 在 Page 上打印一个数字
【发布时间】：2020-11-08 05:08:06
【问题描述】：

我只是尝试使用 React Hooks 更改标题和内容状态，但我在页面上显示了一个数字，谷歌搜索显示了一堆与 setInterval 和 Timeout 如何生成键或值有关的东西，但我不知道为什么它们会出现在页面上。我可以使用空 div 隐藏它，但我很好奇我是否做错了什么，如果我使用类而不是函数，值会迅速增加并且我的 CPU 达到最大值出去。

 function MyComponent (){
        const [heading, setHeading] = useState('React(Loading)')
        const [content, setContent] = useState('Loading...')
        return(
            <main>
                <h1>{heading}</h1>
                <p>{content}</p>
                {
                    setTimeout(() =>{
                        setHeading('React(Loaded)')
                            setContent('Loaded')
                    }, 2000)} // should change the values, which it does with addition of a number
            </main>
        );
    }

结果页面是呈现为here 另外，我尝试使用 onload 函数来做同样的事情，但没有任何反应。

【问题讨论】：

标签： reactjs react-hooks jsx settimeout use-state

【解决方案1】：

setTimeout 返回一个数字，用于标识使用 clearTimeout 时的超时时间。这就是为什么您会在内容下方看到数字。

要隐藏数字，您应该将 setTimeout 移到返回函数之外。另外，在 return 语句中尽量少用 JS，只用 JSX，让组件更清晰易读。

但是仅仅将 setTimeout 移到 return 语句之前是不够的。该函数将在每次渲染上运行，并且有很多事情可以触发重新渲染 - 状态更改或父级重新渲染。因此，在每次重新渲染时，您都将设置一个新的超时。超时本身会更新一个触发渲染的状态，该渲染触发 setTimeout - 因此您正在创建一个无限循环。

所以你想只调用一次 setTimeout - 你可以使用 useEffect，它只会在依赖数组改变时重新运行，但如果你将它留空，它只会运行一次，因为什么都不会改变并且重新-run 永远不会被触发。

function MyComponent (){
        const [heading, setHeading] = useState('React(Loading)')
        const [content, setContent] = useState('Loading...')

        useEffect((
            setTimeout(() =>{
                setHeading('React(Loaded)')
                setContent('Loaded')
            }, 2000)
        ), []);

        return(
            <main>
                <h1>{heading}</h1>
                <p>{content}</p>
            </main>
        );
}

【讨论】：

酷，我不知道它返回了任何东西，上面的行不通因为它算作内存泄漏并且没有任何渲染，我想我会使用不可见的 div，无论如何谢谢
什么内存泄漏？不可见的 div 不是解决方案，因为我写的原因，你不应该这样做
嘿，我没说它会导致内存泄漏，浏览器确实，它无法完全渲染，最后的评论是我们应该删除所有 useEffeft 出现，我没太注意老实说，任务是简单地更改页面加载上的文本内容
我很抱歉我之前的行为，因为我睡眠不足，不得不完成分配，据称内存泄漏是由 setTimeout 返回一个值引起的，因为它是一个箭头函数，它返回一些值，如果我们使用 useEffect wirh 将 while 操作定义为单独的函数，我们可以摆脱错误并安全地呈现我们的页面，您可以看到我的最终解决方案的答案，感谢您给我一个想法
你写的是错误的。出于某种原因，组件在 setTimeout 完成之前卸载。您收到的错误表明在卸载组件后触发了 setState（在您的情况下为 setHeading 和 setContent）。您可以使用在组件卸载时触发clearTimeout 的清理功能，以防止触发超时回调。您还应该检查卸载的原因，它可能是一个错误（或不是，这取决于）。

【解决方案2】：

所以，通过使用上面的答案，我们得到以下错误

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function

原因还是 setTimeout 返回一个数字，最终的答案是使用代码作为单独的函数，如下所示：

useEffect( timeOutFunction, [])

    function timeOutFunction() {
        setTimeout(() => {
           
                setHeading('React(Loaded)')
                setContent('Loaded'), 2000)
}

【讨论】：