Reputation: 341
I have a question about userContext in react with typescript.
First I define it in RubroContext.tsx
import { createContext, useContext } from "react";
import { RubroType1, RubroType2 } from "../Interfaces/interfaces";
export const RubroContext1 = createContext <Partial<RubroType1>>({})
export const RubroContext2 = createContext <Partial<RubroType2>>({})
export const useRubroContext1 = () => useContext(RubroContext1);
export const useRubroContext2 = () => useContext(RubroContext2);
this is interfaces.tsx
export type RubroType1 = {
rubrosItem1 : itemRubro;
setItemRubro1: Dispatch<SetStateAction<itemRubro >>;
}
export type RubroType2 = {
rubrosItem2 : itemRubro;
setItemRubro2 : Dispatch<SetStateAction<itemRubro >>;
}
and this is how I implement it in the components
const CompletarRubros = (props:{setIsReg:any,email:any, clientType:any}) => {
const {rubrosItem1,setItemRubro1} = useRubroContext1 ()
const {rubrosItem2,setItemRubro2} = useRubroContext2 ()
const rubro = useRef ("first")
const radius = useRef (1)
const description = useRef ("test")
useEffect(() => {
setItemRubro1!({
rubro:rubro.current,
radius:String(radius),
description:descripcion.current,
calificacion:0,
})
}, []);
//...........
}
The problem is that the code is not updated. When I want to access rubrosItem1 in other components, the information that should have been saved in the useEffect is not there. I am doing something wrong?
for example in another component
const Test= () => {
const {rubrosItem1,setItemRubro1} = useRubroContext1 ()
useEffect(() => {
console.log(rubrosItem1.rubro)
// it does not show anything
}, []);
}
Upvotes: 0
Views: 22
Reputation: 102672
You should create a RubroContext1Provider
component and declare the context value as its local state. So that the children of the RubroContext1Provider
component and share the context value(stored in its state).
E.g.
RubroContext.tsx
:
import {
createContext,
Dispatch,
SetStateAction,
useContext,
useState,
} from 'react';
import * as React from 'react';
type itemRubro = any;
export type RubroType1 = {
rubrosItem1: itemRubro;
setItemRubro1: Dispatch<SetStateAction<itemRubro>>;
};
export type RubroType2 = {
rubrosItem2: itemRubro;
setItemRubro2: Dispatch<SetStateAction<itemRubro>>;
};
export const RubroContext1 = createContext<Partial<RubroType1>>({});
export const RubroContext2 = createContext<Partial<RubroType2>>({});
export const useRubroContext1 = () => useContext(RubroContext1);
export const useRubroContext2 = () => useContext(RubroContext2);
export const RubroContext1Provider = ({ children }) => {
const [value, setValue] = useState();
return (
<RubroContext1.Provider
value={{
rubrosItem1: value,
setItemRubro1: setValue,
}}
>
{children}
</RubroContext1.Provider>
);
};
CompletarRubros.tsx
:
import { useEffect, useRef } from 'react';
import { useRubroContext1 } from './RubroContext';
export const CompletarRubros = () => {
const { rubrosItem1, setItemRubro1 } = useRubroContext1();
const rubro = useRef('first');
const radius = useRef(1);
const description = useRef('test');
useEffect(() => {
setItemRubro1({
rubro: rubro.current,
radius: String(radius),
description: description.current,
calificacion: 0,
});
}, []);
return null;
};
Test.tsx
:
import { useRubroContext1 } from './RubroContext';
export const Test = () => {
const { rubrosItem1 } = useRubroContext1();
console.log('[Test]:', rubrosItem1?.rubro);
return null;
};
App.tsx
:
import * as React from 'react';
import { CompletarRubros } from './CompletarRubros';
import { RubroContext1Provider } from './RubroContext';
import './style.css';
import { Test } from './Test';
export default function App() {
return (
<div>
<RubroContext1Provider>
<CompletarRubros />
<Test />
</RubroContext1Provider>
</div>
);
}
The console logs:
[Test]:undefined
[Test]:undefined
[Test]:first
[Test]:first
Upvotes: 1