Next.js 13 오류 수정: React-redux 컨텍스트가 누락되었습니다. 내에 구성 요소를 래핑하세요.
P粉269847997
P粉269847997 2023-08-16 15:42:17
0
1
386

redux의 데이터를 사용하고 싶지만 이 오류를 해결할 수 없습니다. 따라서 next.js 13에 애플리케이션 라우터가 있고 /settings/account에서 내 페이지에 액세스하려고 합니다. 내 파일 구조는 다음과 같습니다.

--앱 --설정 레이아웃.jsx page.jsx --계정 page.jsx 레이아웃.jsx

계정 페이지의 사용자 데이터에 액세스하고 싶습니다.

'react'에서 React 가져오기 'react-redux'에서 가져오기 { useSelector }; 기본 함수 AccountPage() 내보내기 { const {info: userInfo} = useSelector(state => state.user); const {이름, 아이디} = userInfo; console.log(이름, 아이디) 반품 ( 
페이지
) }

하지만 오류가 발생했습니다:오류: React-redux 컨텍스트 값을 찾을 수 없습니다. 구성 요소가 공급자에 래핑되어 있는지 확인하세요. 페이지를 감싸는 레이아웃을 사용하면 문제가 해결될 것이라고 생각하여 다음과 같이 했습니다.

layout.jsx "클라이언트 사용" "@/context/store"에서 { 매장 }을 가져옵니다. "react-redux"에서 { 제공자 }를 가져옵니다. 기본 함수 내보내기 AccountLayout({ children }) { 반품 ( <공급업체 스토어={스토어}> {어린이들}  ) }

안타깝게도 이는 도움이 되지 않습니다. 설정/계정 페이지와 설정 페이지의 레이아웃은 이름만 다를 뿐 동일합니다. - SettingsLayout(루트 레이아웃이 이 문제를 해결할 것이라고 생각했습니다). 설정 페이지는 코드가 없고 일반 HTML만 포함되어 있습니다. App 구성요소를 래핑하지 않고 이 문제를 어떻게 해결할 수 있나요?

P粉269847997
P粉269847997

모든 응답 (1)
P粉515066518

이것은 테스트된 방법입니다.

애플리케이션 폴더 아래에 redux-provider.js라는 새 파일을 추가하세요

으아악

응용 프로그램 폴더 아래에 공급자.tsx라는 다른 파일을 추가하고 ReduxProvider를 구현하세요

으아악

layout.tsx 파일에 공급자 구현(앱 폴더의 직접 하위 구성 요소)

으아악

이제 다른 페이지에서도 스토어에 접근할 수 있습니다.

업데이트

네. 하지만! ReduxProvider에서 루트 구성 요소를 래핑한다고 해서 다른 모든 구성 요소가 클라이언트 구성 요소라는 의미는 아닙니다. 여전히 서버 구성 요소를 가질 수 있습니다. 어떻게 하나요?

애플리케이션 폴더 아래에 Experiment라는 새 폴더를 추가한 다음, Experimental 폴더 아래에 page.tsx라는 새 파일을 추가합니다. 다른 파일에서 page.tsx 파일의 내용을 가져올 수 있습니다.

/experimental/page.tsx

으아악
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿
    회사 소개 부인 성명 Sitemap
    PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!