Quería probar mobx para la administración del estado de reacción, sin embargo, no puedo hacer que esto funcione. Tengo esta tienda simple para almacenar solo un número llamado contador. Puede incrementarlo/decrementarlo e incrementarlo en x. Tengo este archivo store.js para almacenar el estado:
import { action, makeObservable, observable } from "mobx"; class CounterStore { counter = 0; constructor() { makeObservable(this, { counter: observable, increment: action, decrement: action, increase: action }); } increment() { this.counter++; } decrement() { this.counter--; } increase(value) { this.counter = this.counter + value; } } const store = new CounterStore(); export default store;Y luego tengo este componente llamado Counter dentro de Counter.js, que ejecuta métodos como incremento y decremento para la tienda.
import { useRef } from "react"; import classes from './Counter.module.css' import store from "../store"; function Counter() { const numberInput = useRef(); const increaseHandler = (event) => { event.preventDefault(); if (numberInput.current.value === ''){ return; } store.increase(parseInt(numberInput.current.value)) }; return ( <div> <div className={classes.counter}>{store.counter}</div> <div className={classes.row}> <button className={classes.btn} onClick={store.increment}>Increment</button> <button className={classes.btn} onClick={store.decrement}>Decrement</button> </div> <form className={classes.row} onSubmit={increaseHandler}> <button className={classes.btn}>Increase by x</button> <input className={classes.input} required="true " type="number" ref={numberInput} /> </form> </div> ); } export default Counter;Pero cuando presiono el botón, siempre obtengo
Uncaught TypeError: Cannot read properties of undefined (reading 'counter') at increment¿Cómo es posible que el contador no esté definido? Ya exporté la tienda instanciada.
Su función está perdiendo contexto ( this ), necesita leer sobre ella para comprender cómo funciona. Desestructuraste esta función de la tienda y ya no está vinculada a ella.
La forma más común es definir todas las acciones como funciones de flecha, así:
// Use arrow function to define methods increment = () => { this.counter++; } decrement = () => { this.counter--; } increase = (value) => { this.counter = this.counter + value; }De esa manera, no necesita preocuparse por el contexto, se vinculará automáticamente a la clase actual.