Question

当某些异步任务正在运行（提取）时，我需要在应用程序中显示加载叠加层。与其在每个组件中执行异步加载而不是创建加载叠加层，而是在“ App”主组件内创建了一个通用叠加层。

App.state.loadingOverlay = true

会打开此叠加层

要使用App组件与子组件进行通信，我正在使用上下文。

在子组件中启动异步请求之前，我先做过：

this.context.cntLoadingOverlay = true

在我的应用程序组件中，我像这样设置了一个Consumer来监听上下文更改：

               <SSContext.Consumer>
                    {
                        context => {    
                            //Check loading overlay settings
                            if (this.state.loadingOverlay !== context.cntLoadingOverlay) this.setState({ loadingOverlay: context.cntLoadingOverlay });
                        }
                    }
                </SSContext.Consumer>

但是，上下文更新后，Consumer不会启动。（即使在Rect调试器中，我也可以观察到cntLoadingOverlay的值已按预期设置为true）

仅当我更改App组件的状态或强制重新加载它时，它才会触发。但是我认为这不是正确的方法。

我要做什么有更好的解决方案？

这是我的App.js

export default class App extends Component {

    static contextType = SSContext;

    render() {

        return <SSContext.Provider value={this.state.contextToProvide}>

                <SSContext.Consumer>
                    {context=>{ console.log('context changed') }}
                </SSContext.Consumer>

                </SSContext.Provider>
    }
}

运行etch时React Context.Consumer不触发

0 个答案: