Mi archivo de proveedor de la API de contexto (archivo Exp)
import react form 'react'; import {createContext} from "react"; export const ContextforFile = createContext(); export function ContextData(props){ let rdata=props.data return( <> <p>{rdata}</p> //I am able to Get the Data here NO ISSUES TILL HERE <ContextforFile.Provider value={rdata} >{props.children}</ContextforFile.Provider> </> ); } function A() { return ( <div> <ContextData data="Sara" /> </div> ); } export default A;Mi archivo App.js
import Exp, { ContextData } from './afterlogin/patirel/patmain'; import Experiment from './experi'; import {Routes,Route} from 'react-router-dom'; import * as React from 'react'; function App() { return ( <ContextData> <div> <Routes> <Route index element={<Exp/>} /> <Route path="/experi" element={<Experiment/>} /> </Routes> </div> </ContextData> ); } export default App;solo el valor props.data no viene aquí, mientras que otros valores se pueden obtener fácilmente. Este es el archivo Experi. Donde quiero obtener mis valores, mi archivo de consumidor.
import * as React from 'react'; import { useContext } from 'react'; import { ContextforFile } from './afterlogin/patirel/patmain'; export default function Experi(){ const first= useContext(ContextforFile); return( <div> <h1>ISSUE is Here Other VALUES are COMING BUT NOT props.data: {first}</h1> </div> ); }¡Por favor ayuda! Han pasado días y no puedo entender lo que me estoy perdiendo. ¿Cómo puedo resolverlo?
Su función ContextData no devuelve nada. Yoo debería devolver el ContextforFile.Provider
La posibilidad de obtener el valor indefinido podría ser muchas cosas.
por ejemplo:
tal vez, se está volviendo indefinido de props.data . tal vez porque no está proporcionando el valor predeterminado para createContext .
prueba los siguientes pasos, estos pueden ayudarte.
export const ContextforFile = createContext([value it could be any thing like array, string or object etc.]); Su versión: const first= useContext(ContextforFile);
versión recomendada: const useFirst= () => useContext(ContextforFile);
const first= useFirst()aquí puedes encontrar la diferencia:ejemplo de caja de arena