时间戳

首页 > 解决方案 > 组件未包装

reactjs - 组件未包装

问题描述

我试图弄清楚这里有什么问题。我不断收到相同的错误消息，即“错误：找不到 react-redux 上下文值；请确保组件包装在 <Provider> 中”。

import 'tailwindcss/tailwind.css';
import '../styles/global.css';
import Router from 'next/router';
import ProgressBar from "@badrap/bar-of-progress";
import React, { useEffect, useState } from "react";
import { auth } from '../firebase';
import { useDispatch, useSelector, Provider } from "react-redux";
import { store } from '../src/app/store'
import { login, logout, selectUser } from "./userSlice";

function MyApp({ Component, pageProps }) {

    const user = useSelector(selectUser);
    const dispatch = useDispatch();

    useEffect(() => {

      const unsubscribe = auth.onAuthStateChanged(userAuth => {
        if(userAuth) {
          dispatch(
            login({
            uid: userAuth.uid,
            email: userAuth.email
          })
          );
        } else {
          dispatch(logout);
        }
      });
      return unsubscribe;
    }, []);

    return (
      <Provider store={store}>
          <Component {...pageProps}/>
      </Provider>
    )

}

export default MyApp

标签： reactjsredux

解决方案

MyApp 不在里面，<Provider store={store}>这就是为什么它不能从useSelector. 组件允许其Provider子级获取和设置 Redux 存储的值。

所以你必须像这样将你的提供者提升到<MyApp />Component for Redux 之上：

<Provider store={store}>
   <MyApp />
</Provider>

推荐阅读