反应-呈现DOM时正在加载屏幕吗?

时间:2019-05-10 21:20:17

标签: javascript reactjs

我想显示加载屏幕,直到呈现DOM。在我的程序中。我正在检查是否有设备,然后应该显示加载页面,直到呈现DOM为止,否则显示未找到任何设备。

但是该页面显示未找到任何设备,然后在呈现DOM之后显示了设备。如果存在在渲染DOM之前的设备,如何解决此问题并显示“正在加载”消息。

渲染设备也需要时间。因此,我无法检查是否有设备-这就是“首先找不到设备”的原因。

render() {
    const { devices } = this.props;

    if (this.state.isLoading) {
        return (
            <div>Loading!!!!!</div>
        );
    }
    if (devices && devices.length > 0) {
        return (
            <div> // Devices table will be displayed
            </div>
        );
    } else {
        return (
            <div>
                No Devices found
            </div>
        );
    }
}

1 个答案:

答案 0 :(得分:1)

render() {
    const { devices } = this.props;

      if (devices && devices.length > 0) {
          return (
                <div> // Devices table will be displayed
                </div>
        );
       }else {
if(this.state.loading){                   //Not sure how you set the state
return ( <div>Loading...</div>)  
}

        return (
            <div>
                No Devices found
            </div>
        );
    }
}