反应-在渲染DOM时加载屏幕吗？

Question

我想显示加载屏幕，直到呈现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>

        );

    }

}

Answer 1

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