Dado el siguiente proveedor de contexto de reacción. Una clase Counter simple con 2 métodos, almacenada en el contexto React.
import { createContext, useContext } from "react"; class Counter { public count: number = 0; getCount = () => { return this.count; }; incrementCount = () => { this.count = this.count + 1; }; } type CounterContextType = { counter: Counter; }; const defaults: CounterContextType = { counter: new Counter() }; const CounterContext = createContext<CounterContextType>(defaults); export const CounterProvider: React.FC = ({ children }) => { const counter = new Counter(); return ( <CounterContext.Provider value={{ counter }} > {children} </CounterContext.Provider> ); }; export const useCounter = () => { return useContext(CounterContext); }; Quiero escuchar los cambios en la propiedad de count de la instancia de Counter .
Esto es lo que he probado:
import { useMemo } from "react"; import { CounterProvider, useCounter } from "./CounterProvider"; const DisplayWithMethod = () => { const { counter } = useCounter(); return <div>Method: {counter.getCount()}</div>; }; const DisplayWithProperty = () => { const { counter } = useCounter(); return <div>Prop: {counter.count}</div>; }; const DisplayWithMemo = () => { const { counter } = useCounter(); const val = useMemo(() => counter.count, [counter.count]); return <div>Memo: {val}</div>; }; const Button = () => { const { counter } = useCounter(); return <button onClick={counter.incrementCount}>Increment</button>; }; export default function App() { return ( <CounterProvider> <DisplayWithMethod /> <DisplayWithProperty /> <DisplayWithMemo /> <Button /> </CounterProvider> ); } Ninguno de estos funciona ya que la instancia del contador nunca cambia, por lo que no se activan renderizaciones. Cualquier idea (s) sobre cómo hacer que esto funcione manteniendo una estructura de clase para Counter .
El problema es que React no obtiene que el conteo haya cambiado y no se vuelve a procesar. Puedes deshacerte del problema usando useState hook.
Debe cambiar las definiciones de tipo como se muestra a continuación y construir instancias de contador utilizando las salidas del gancho useState .
import { createContext, useContext, useState } from "react"; type CounterContextType = { counter: { count: number; getCount: () => number; incrementCount: () => void; }; }; const defaults: CounterContextType = { counter: { count: 0, getCount: () => 0, incrementCount: () => undefined } }; const CounterContext = createContext<CounterContextType>(defaults); export const CounterProvider: React.FC = ({ children }) => { const [count, setCount] = useState<number>(0); return ( <CounterContext.Provider value={{ counter: { count, getCount: () => count, incrementCount: () => { setCount((prevCount) => prevCount + 1); } } }} > {children} </CounterContext.Provider> ); }; export const useCounter = () => { return useContext(CounterContext); };