React-Redux 和 Material UI:组件不会将存储传递给"连接"的子级



重复代码沙盒https://ndg6d.csb.app/

完全错误Uncaught Error: Could not find "store" in the context of "Connect(UploadInternal)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(UploadInternal) in connect opt.

情况一切正常,然后将react 15.x更新为16.13.x,并将react redux从5.x更新为7.2.x,现在,当连接的组件作为子级传递给Upload.jsx中的Dialog组件时,会出现上述错误。如果存储未嵌套在Dialog中,则存储将正确传递给子组件。我使用的是一个非常旧的Material UI版本(v0.20.2(,但它的package.json文件将依赖项reactreact-dom都列为^16.0.0,所以应该可以。

如果您还没有这样做,请将此代码添加到index.js中:

import { Provider } from "react-redux";
import thunk from "redux-thunk";
import rootReducer from "./store/reducers";
const composeEnhances = window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() : f => f;
const store = createStore(rootReducer,compose(applyMiddleware(thunk),composeEnhances));
const app = (
<Provider store={store}>
<App />
</Provider>
);

reducer index.js文件将类似于:

import { combineReducers } from 'redux';
import rootReducer from "../components/app/reducers";
export default combineReducers({
// your reducers here
root: rootReducer,
});

我认为这是由一个过时的MaterialUI组件引起的,该组件在上下文之外创建了一个popover,如上所述。嵌套在MaterialUI组件Dialog中的子级抛出错误。但是,如果子级未嵌套在Dialog中,则它可以访问存储。这表明根、它的子和孙可以访问存储,并表明Dialog在这种情况下导致了边界的破坏。

相关内容

  • 没有找到相关文章

最新更新