无法读取未定义的属性 - javascript class

Question

我想尝试使用 mobx 来进行 React 状态管理，但是，我无法让它工作。我有这个简单的商店，用于存储一个名为计数器的数字。您可以 increment/decrement 它，并将其增加 x。我有这个文件 store.js 用于存储状态：

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;

然后我在 Counter.js 中有这个名为 Counter 的组件，它执行存储的递增和递减等方法

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;

但是当我按下按钮时，我总是得到

Uncaught TypeError: Cannot read properties of undefined (reading 'counter') at increment

计数器怎么可能是未定义的？我已经导出了实例化的商店。

Answer 1

您的函数正在丢失上下文 (this)，您需要 read about it 才能了解其工作原理。您从商店中解构了这个函数，它不再绑定到它。

最常见的方式是将所有动作定义为箭头函数，例如：

    // Use arrow function to define methods
    increment = () => {
        this.counter++;
    }

    decrement = () => {
        this.counter--;
    }

    increase = (value) => {
        this.counter = this.counter + value;
    }

这样你就不用担心上下文了，它会自动绑定到当前的class。

无法读取未定义的属性 - javascript class

Cannot read properties of undefined - javascript class

javascript

reactjs

mobx