重复代码沙盒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
文件将依赖项react
和react-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
在这种情况下导致了边界的破坏。