在 "Connect(DiveLogTable)" 的上下文中找不到 "store"。将根组件包装在 Redux 组件中的 <Provider> 错误中

Question

我已经设法在几个组件上收到以下错误消息，但我不确定我是如何收到的。我有其他使用 Redux 的文件可以正常工作并使用相同的字段并且它们可以正常工作但是我不确定是什么引发了这个错误。我所有的数据提取目前都在通过一个看起来设置正确的 Reducer。

这些类型的错误的常见原因是什么？其他组件与商店一起正常工作，所以我认为问题出在这个组件上。我的商店已经包装在 Provider 中，并且该组件已连接到 App.js 文件。

为什么 App.js 文件的某些子类在访问相同数据时可以工作，而有些则不能？

Error: Could not find "store" in the context of "Connect(DiveLogTable)". 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(DiveLogTable) in connect options.

组件出错

const DiveLogTable = (props) => {

    // select user object from redux
    const user = useSelector(state => state.user);

    // get the object with all the fields
    const fields = useSelector(state => state.fields);

    // pulls the users dive log list
    const {userDiveLogList} = user;

    // can destructure individual fields
    const {regionList, diveTypeList} = fields;

    const [userDive, setUserDive] = useState({
        diveID: "",
        diveTypeID: "",
        diveSchoolNameID: "",
        diveCurrentID: "",
        diveVisibilityID: "",
        diveMaxDepth: "",
        diverUserNumber: "",
        diveVerifiedBySchool: "",
        diveNotes: "",
        diveSpotID: "",
    });

    // get access to dispatch
    const dispatch = useDispatch();

    useEffect(() => {
        pullUserDiveLog(props.match.params.userID);
    }, [props.match.params.userID]);


    const handleExpandClick = () => {
        const {state} = this
        this.setState({...state,expanded: !state.expanded})
    };

const classes = useStyles;

    return (

   .....

function mapStateToProps(state){
    const { user } = state.auth;
    const { diveLogFields } = state.diveLogFields;
    return {
        user,
        diveLogFields,
    };
}

export default connect(mapStateToProps)(DiveLogTable);

我的商店设置如下所示，所以我已经包装了提供商，我的 app.js 路由包装在路由器中。

店铺

ReactDOM.render(
    <Provider store={store}>
        <BrowserRouter>
            <CssBaseline />
            <App />
        </BrowserRouter>
    </Provider>,
    document.getElementById("root")
);

店铺

const store = createStore(
    rootReducer,
    compose(
        applyMiddleware(thunk),
        window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
    )
);

export default store;

**更新

会不会是我包装了多个Provider有关？看起来我有一个 Redux 和 React Router 的提供者？这些有冲突吗？**

我是否也应该在 app.js 中使用 mapStateToProps？它在 Redux 中声明用户存储数据，这是否意味着它保留在我的所有组件中的应用程序中，我不必在任何组件中调用它？

app.js

class App extends Component {


    constructor(props) {

        super(props);

        this.logOut = this.logOut.bind(this);

        this.state = {
            showUserLevelAccess: false,
            showSchoolLevelAccess: false,
            showAdminLevelAccess: false,
            currentUser: undefined,
        };

        history.listen((location) => {
            props.dispatch(clearMessage());
        });
    }

    componentDidMount() {

        const user = this.props.user;
        console.log(user)
        if (user) {
            this.setState({
                currentUser: user,
                showUserLevelAccess: user.userRoles === 1,
                showSchoolLevelAccess: user.userRoles === 2,
                showSiteAdminLevelAccess: user.userRoles === 3,
            });
        }
    }

    logOut() {
        this.props.dispatch(logout());
    }

    render() {

        const {
            // current user gives specific user details
            currentUser,
            // levels give role access
            userLevelAccess,
            schoolLevelAccess,
            siteAdminLevelAccess,
        } = this.state;

        const classes = useStyles;

        return (

            <Router history={history}>
                <div className={classes.root}>
                {/*<Grid className="container">*/}
                    {/*<ScubaNavbar>*/}
                <AppBar position="static" className="navbar navbar-expand navbar-dark bg-dark">
          .......

                    <div className="container mt-3">
                        <Switch>
                            <Route exact path={["/", "/home"]} component={HomePage} />
                            <Route exact path="/login" component={Login} />
                            <Route exact path="/registration" component={Registration} />
                            {/*<Route exact path="/aboutsustscub" component={About} />*/}
                            <Route exact path="/profile" component={Profile} />
                            <Route exact path="/divelogform" component={DiveLogForm} />
                            <Route exact path="/divelogtable" component={DiveLogTable} />
                            <Route exact path="/divespotform" component={DiveSpotForm} />
                            <Route exact path="/schoollogapproval" component={ApproveDiveLog} />
                            {/*<Route exact path="/divespottable" component={diveSpotTable} />*/}
                            <Route exact path="/marinelifeform" component={MarineLifeForm} />
                            <Route exact path="/articleform" component={ArticleForm} />
                            <Route exact path="/scubamap" component={ScubaMap} />
                            <Route exact path="/schoollist" component={SchoolList} />
                            {/*<Route exact path="/imageupload" component={ImageUpload} />*/}
                            <Route path="/user" component={UserLevelAccess} />
                            <Route path="/school" component={SchoolLevelAccess} />
                            <Route path="/siteadmin" component={SiteAdminLevelAccess} />
                        </Switch>
                    </div>
                    <DefaultFooter />
            </Router>
        );
    }
}

function mapStateToProps(state){
    const { user } = state.auth;
    return {
        user,
    };
}

export default connect(mapStateToProps)(App);

Answer 1

几个月前我遇到了这个问题，下面是我能回忆起的关于我找到的解决方案的内容。

在创建存储变量之前，创建一个名为 composeEnhancers 的布尔变量，如下所示。

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

创建 composeEnhancers 变量后，您可以创建 store 变量。创建商店时，不要像上面那样使用 compose 方法，而是在其位置使用 composeEnhancers 变量并将 applyMiddleware(thunk) 作为参数传递。

const store = createStore(
  rootReducer,
  composeEnhancers(applyMiddleware(thunk))
);

这是完整的代码片段。

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(
  rootReducer,
  composeEnhancers(applyMiddleware(thunk))
);

在 "Connect(DiveLogTable)" 的上下文中找不到 "store"。将根组件包装在 Redux 组件中的 <Provider> 错误中

Could not find "store" in the context of "Connect(DiveLogTable)". Either wrap the root component in a <Provider> Error in Redux component

router

reactjs

redux

react-redux