渲染时反应超时答案

【问题标题】：React Timeout on render渲染时反应超时
【发布时间】：2020-05-29 14:27:24
【问题描述】：

我是新来的反应。我想延迟加载内容。当页面加载时，我想显示一个内容加载器，如 Facebook 中的。内容加载速度如此之快，以至于它不会等待显示内容加载器。

    renderPage() {
        const {content} = this.props;

            if (!content) {  
              return <Contentloader>;
            }
            else{
                return <Main content={ content } />;
            }            
     }


   render() {
        return (
            <main>
                 { this.renderPage() }
            </main>
        );
    }

那么我怎样才能在 else 条件下延迟加载一段时间，以便我可以显示 contentLoader。

【问题讨论】：

如果内容已从 api 获取，则显示加载器是一种不好的方式，但是对于您的问题，您可以使用 javascript 的 setTimeOut 函数在一段时间后加载您的内容。
我理解错了，但需要加载部分。

标签： reactjs

【解决方案1】：

试试这个希望这会有所帮助

state = {
    load: false
}

componentDidMount(){
    if (window.localStorage.getItem('first'))
        return;
    window.localStorage.setItem('first', true);
    setTimeout(() => {
        this.setState({
            load: true
        })
    }, 2000)
}



render(){
    return (
        <div>
            {!this.state.load && "your loader"}
            {this.state.load && "your content"}
        </div>
    )
}

【讨论】：

@Rspp 如果这确实是您的问题，那么请按照标记和投票的方式进行操作，因此可以关闭此问题。
@维亚斯。我试过这个，但每当我回来时，它都会继续加载加载器，然后是内容。反正我只能第一次做吗？？
请。我如何使用本地存储来做这个。
还有一个疑问。我在同一页面中有标题组件。那么如何让标头组件等到内容加载完毕？

【解决方案2】：

您可以添加：

this.state = {
 loading: true
}

给你的构造函数。

在渲染中添加您的超时功能，通过以下方式完成功能：

this.setState({loading: false})

对于您的内容：

let content = <Loader />;
if(this.state.loading === false){
content = ("Your Content"):
}

【讨论】：

我尝试在 compuntDidMount 中添加超时，但它没有触发