Redux 在对话框中嵌套的连接组件中找不到“存储”错误

我有一个连接的组件，它在使用对话框组件包装时可以很好地渲染，但是当我使用对话框组件包装时，我总是感到害怕：在ConnectMyComponent的上下文中找不到存储。是的，根目录是用包装的，并且存储区很好，所有其他页面、组件、连接的项目都可以访问存储区，只是在该对话框中呈现时不能访问

这在过去并不是一个问题，而且显然是由于某些依赖性维护的副作用而产生的。如果我通过@material ui/core/Dialog将对话框组件的底层lib从MUI 0.20交换到版本3，它就可以正常工作。在MUI0.20和更新的react-ish依赖项之间存在某种平衡

只是想知道是否有人经历过这种情况

// Where it's invoked...

<ParentPageComp>
  <Dialog open>
    <MyConnectedComponent />
  </Dialog>
</ParentPageComp>

// What is being attempted to render...

class MyConnectedComponent extends React.Component {
  render() {
    return <div>Yeppers</div>;
  }
 }

export default connect(state => ({ blah: state.blah }))(MyConnectedComponent);

再说一次，如果我换成，一切都是正常的

不确定这是否相关，但包装对话框的父组件是异步加载的挂钩。。。即使用react-loadable的代码拆分机制替换，我也会得到同样的淘气结果

使用：

材料ui 0.20.2是，旧的 反应16.8.6 Redux 4.0.1 React redux 7.1.0 React路由器dom5.0.0

---

旧版本可以很容易地阻止通过DOM层次结构的上下文传播。您可以像这样在组件上手动携带上下文

import { Provider, ReactReduxContext } from 'react-redux';

//...
render() {
    return (
        <ParentPageComp>
            <ReactReduxContext.Consumer>
                {((ctx) => (
                    <Dialog open>
                        <Provider store={ctx.store}>  /* make store available again */
                            <MyConnectedComponent />
                        </Provider>
                    </Dialog>
                )).bind(this) // Dont forget to bind this
                }
            </ReactReduxContext.Consumer>
        </ParentPageComp>
    );
}

---

旧版本可以很容易地阻止通过DOM层次结构的上下文传播。您可以像这样在组件上手动携带上下文

import { Provider, ReactReduxContext } from 'react-redux';

//...
render() {
    return (
        <ParentPageComp>
            <ReactReduxContext.Consumer>
                {((ctx) => (
                    <Dialog open>
                        <Provider store={ctx.store}>  /* make store available again */
                            <MyConnectedComponent />
                        </Provider>
                    </Dialog>
                )).bind(this) // Dont forget to bind this
                }
            </ReactReduxContext.Consumer>
        </ParentPageComp>
    );
}

---

如果您可以在中复制这一点，将使其他人更容易尝试提供帮助。使用的RenderToLayer看起来是问题的潜在来源：看起来是升级Material-UI的一个很好的理由。当然升级。。。它已经过期了，只是平衡了几个小时。目前，我有新版本的cherry picked components与旧版components一起运行。如果您可以在一个新版本中复制此组件，则会使他人更容易尝试提供帮助。使用的RenderToLayer看起来可能是问题的根源：看起来是升级Material-UI的一个很好的理由。当然，升级。。。它已经过期了，只是平衡了几个小时。现在我有新版本的cherry picked组件与旧版组件一起运行Hanks a Tong，就是这样。。。当我一点一点地升级时，这正好解释了发生了什么并帮助我理解。多亏了你的帮助，我今天就能推出一个新的测试版本。这个解决方案对我有效，无需绑定此eslint，无需额外绑定。我们的团队在将我们的应用程序从react redux v5.x升级到7.1.0后发现了这个问题。我们以前在使用对话框组件时没有问题。它工作正常。谢谢兄弟，非常感谢，就是这样。。。当我一点一点地升级时，这正好解释了发生了什么并帮助我理解。多亏了你的帮助，我今天就能推出一个新的测试版本。这个解决方案对我有效，无需绑定此eslint，无需额外绑定。我们的团队在将我们的应用程序从react redux v5.x升级到7.1.0后发现了这个问题。我们以前在使用对话框组件时没有问题。它工作正常。谢谢兄弟。