setTimeout 函数在函数结束后不显示 HTML答案

【问题标题】：setTimeout function does not display HTML after function endssetTimeout 函数在函数结束后不显示 HTML
【发布时间】：2022-01-14 14:18:49
【问题描述】：

我创建了一个 3 秒的超时函数，然后它应该呈现 HTML。我正在按照官方文档执行此操作，代码就像文档中的一样。有人遇到过类似的问题吗？

render() {
return (
<div>
    {this.state.activePage === 'Home' ? setTimeout(function () {
        <p>Hello World</p>
    }, 3000) : null}
</div>
)
}

【问题讨论】：

不要在渲染中这样做。而是使用useEffect，或将其放入构造函数中，然后更改状态。
您能否提供一个链接到您在文档中看到的位置？不认为您可以以这种方式在 JSX 中执行异步代码....
This approach uses react native，但几乎是一样的

标签： javascript reactjs

【解决方案1】：

你不应该在 react 中编写这样的代码。 setTimeout 返回：

返回的 timeoutID 是一个正整数值，用于标识通过调用 setTimeout() 创建的计时器。 T

而不是你从回调中返回的 JSX。但即使它确实异步返回了您从回调返回的 JSX，您也不会在屏幕上看到 new 内容。要在响应中更改 UI，您必须使用 setState 更改状态变量，这将导致重新渲染。也渲染不是调用setState 的地方。例如，您可以在useEffect 中调用setState。

【讨论】：

【解决方案2】：

无法从传递给 setTimeout 的函数返回值。

您可以尝试以下两个选项

创建一个状态字段来存储您要显示的消息并从 setTimeout 内部更新状态。同样，这样的更新也不能在退货中完成。您可能希望将此逻辑移至组件挂载函数。
这里是一个更普通的 JS 方法，使用 Promise 对象来解决这个问题 Get return value from setTimeout

您能否提供您所引用的有关此代码的文档，以便我们更深入地研究这个问题？

【讨论】：