Creo ganchos personalizados para leer tiendas de estado en mis aplicaciones. const store = useStore(); Que defino como:
const store = new Store(); const StoreContext = createContext(store); StoreContext.displayName = "StoreContext"; function useStore(): Store { const context = useContext(StoreContext); if (!context) { throw new Error("useStore must be used within MyProvider"); } return context; } export { store, useStore };La tienda en sí es casi siempre una clase con múltiples campos y métodos. Digamos que lo defino con métodos de ejemplo:
export class Store { /** Here is some other code with constructor, methods, fields etc... */ public doSomething() { return this.doSomthingElse() }; private doSemothingElse() { console.log("done something else")}; } ¿Por qué es que cuando uso mi gancho de esta manera con desestructuración: const { doSomething } = useStore(); Obtengo can not read property doSomethingElse of undefined , lo que significa que this no está undefined , de esa manera. Pero cuando lo hago: const store = useStore(); store.doSomething(); Funciona bien?
Funciona de esa manera debido a this comportamiento en las clases JS. Vincular el método de llamada a esto dentro de un constructor resuelve el problema con un contexto undefined dentro de un gancho.
this.doSomething = this.doSomething.bind(this); Felicitaciones a Gabriele Petrioli por dar una explicación.