reactjs问题显示加载，而dom呈现具有更多逻辑

在DOM渲染时，我面临显示加载的问题。 我知道还有其他相关的帖子，它们关注的是在获取数据时显示加载，但我的帖子没有什么不同。 我在render方法中使用了逻辑来渲染需要更长时间的网格（具有更多数据）。在这种情况下，渲染函数不会显示加载，因为它仍在处理逻辑。 任何帮助都将不胜感激

e、 g

类DataGrid扩展了React.Component{ 构造函数（道具、上下文）{ this.state={isLoading:false} } render（）{ //要渲染的逻辑。 .. .. .. //需要很长时间 返回( //这将不起作用，因为渲染未完成 ) } }

---

尝试将渲染逻辑从渲染函数中取出，如下所示：

class DataGrid extends React.Component {

    constructor(props, context) {
        this.state = {isLoading : true}
    }

    componentWillMount() {
        //logic to render
        //once logic is done:
        this.setState({ isLoading: false })
    }

    render(){

        if (this.state.isLoading) {
            return <div>
                <Loader/>
            </div>
        }
        else return (
            <div>
                <OtherComponent />
            </div>
        )
    }
}

类DataGrid扩展了React.Component{ 构造函数（道具、上下文）{ this.state={isLoading:true} } 组件willmount（）{ //渲染逻辑 //逻辑完成后： this.setState（{isLoading:false}） } render（）{ if（此.state.isLoading）{ 返回 } 否则返回( ) } }

---

尝试将渲染逻辑从渲染函数中取出，如下所示：

class DataGrid extends React.Component {

    constructor(props, context) {
        this.state = {isLoading : true}
    }

    componentWillMount() {
        //logic to render
        //once logic is done:
        this.setState({ isLoading: false })
    }

    render(){

        if (this.state.isLoading) {
            return <div>
                <Loader/>
            </div>
        }
        else return (
            <div>
                <OtherComponent />
            </div>
        )
    }
}

类DataGrid扩展了React.Component{ 构造函数（道具、上下文）{ this.state={isLoading:true} } 组件willmount（）{ //渲染逻辑 //逻辑完成后： this.setState（{isLoading:false}） } render（）{ if（此.state.isLoading）{ 返回 } 否则返回( ) } }

---

您的代码中可能有两个问题

在构造函数中，您没有调用

super（）

方法

如果您的逻辑需要时间，put位于在呈现时被调用的函数中，并且由于JS的异步性质，您的return语句将被执行

类DataGrid扩展了React.Component{ 构造函数（道具、上下文）{ 超级（道具、背景）； this.state={isLoading:true} } logicFunc=（）=>{ setTimeout（函数（）{ this.setState（{isLoading:false}） }.绑定（此），5000） } render（）{ this.logicFunc（）； 返回( ) } } 类加载器扩展了React.Component{ render（）{ 如果（此.props.isload）{ 返回加载。。。 }否则{ 返回你好世界 } } } ReactDOM.render（，document.getElementById（'app'））

---

您的代码中可能有两个问题

在构造函数中，您没有调用

super（）

方法

如果您的逻辑需要时间，put位于在呈现时被调用的函数中，并且由于JS的异步性质，您的return语句将被执行

类DataGrid扩展了React.Component{ 构造函数（道具、上下文）{ 超级（道具、背景）； this.state={isLoading:true} } logicFunc=（）=>{ setTimeout（函数（）{ this.setState（{isLoading:false}） }.绑定（此），5000） } render（）{ this.logicFunc（）； 返回( ) } } 类加载器扩展了React.Component{ render（）{ 如果（此.props.isload）{ 返回加载。。。 }否则{ 返回你好世界 } } } ReactDOM.render（，document.getElementById（'app'））

老实说，如果它确实需要那么多时间，您可能应该将该逻辑移到其他地方老实说，如果它确实需要那么多时间，您可能应该将该逻辑移到其他地方这不起作用，因为我通过componentWillReceiveProps接收数据，而这不是调用componentWillMount（）函数。我也尝试了componentWillUpdate（），但没有成功。这不起作用，因为我通过componentWillReceiveProps接收数据，并且没有调用componentWillMount（）函数。我也尝试了componentWillUpdate（），但没有成功。嗨，Khatri，这将起作用，因为您的超时时间为5秒。在这种情况下，如果我的渲染逻辑需要5秒以上，那么这将失败，因为setState将启动另一次重新渲染，假设您有一个基于isrendered状态触发的逻辑，否则最好让您的逻辑独立于渲染，这样就不会每次都执行它，这将工作，因为您有5秒的超时时间。在这种情况下，如果我的渲染逻辑需要5秒以上，那么这将失败，因为setState将启动另一次重新渲染，假设您有一个基于isrendered状态触发的逻辑，否则最好让您的逻辑独立于渲染，这样就不会每次都执行