Início / user-19996659

Nikhil Shivanath's questions

Martin Hope
Nikhil Shivanath
Asked: 2025-04-08 13:37:07 +0800 CST
  • 5

Estou tentando migrar meu projeto do React para o NextJS, e isso inclui o uso de contextos. Encapsulei os filhos no provedor de contexto no layout.tsxarquivo na rota que preciso (roteador de aplicativo). Mas quando tento consumir esse contexto em um dos componentes filhos, não funciona. Não está fazendo nada.

Já me certifiquei de que a criação do contexto, o componente filho e tudo mais são componentes do lado do cliente, mas ainda não funciona. Você poderia me ajudar com isso?

//consuming context
'use client'
import { useState } from "react"
import Image from "next/image"
import api from "../../../interceptors"
import { useRouter } from "next/navigation"
import create_simulation from "../../../public/create_simulation.svg"
import { useUserRoomContext } from "../../../lib/contexts/UserContext"

const CreateInterview = () => {
    const [loading,setLoading]=useState(false)
    const [error,setError]=useState("")
    const [interviewDetails , setInterviewDetails] = useState({
        company_name : "" , 
        job_description : "" , 
        role: "",
        resume: "",
    })
    

    const router = useRouter()
    const {setRoomId, setToken}=useUserRoomContext()

// context
"use client"
import {createContext, useState, useContext} from "react"

const userRoomContext = createContext()
export const useUserRoomContext = () => useContext(userRoomContext)

export const UserRoomProvider = ({children}) =>{

    const [roomId,setRoomId] = useState("")
    const [token,setToken]=useState(null)
    const [reportGenerated,setReportGenerated]=useState(false)

    const value={
        roomId,
        setRoomId,
        token,
        setToken,
        reportGenerated,
        setReportGenerated
    }

    return <userRoomContext.Provider value={value}>
        {children}
    </userRoomContext.Provider>
}

Aqui está o layout que usa o provedor de contexto para seus filhos:

"use client"
import React from 'react'
import { UserRoomProvider } from '@/lib/contexts/UserContext'
import ProtectedRoute from '@/components/protection/ProtectedRoute'

const InterviewLayout = ({children}: Readonly<{children: React.ReactNode}>) => {
    console.log("Interview layout rendered")
    return (

        <UserRoomProvider>
            <ProtectedRoute>{ children }</ProtectedRoute>
        </UserRoomProvider>
      )
    
}

export default InterviewLayout
reactjs