[英]Cannot read properties of undefined - javascript class
我想嘗試使用 mobx 進行 react state 管理,但是,我無法讓它工作。 我有這個簡單的商店,用於存儲一個名為計數器的數字。 您可以遞增/遞減它,並將它遞增 x。 我有這個文件 store.js 用於存儲 state:
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
計數器怎么可能未定義? 我已經導出實例化商店。
您的 function 正在丟失上下文 ( this
),您需要閱讀它以了解它是如何工作的。 你從商店中解構了這個 function 並且它不再綁定到它了。
最常見的方法是將所有操作定義為箭頭函數,如下所示:
// Use arrow function to define methods
increment = () => {
this.counter++;
}
decrement = () => {
this.counter--;
}
increase = (value) => {
this.counter = this.counter + value;
}
這樣就不用擔心上下文了,會自動綁定到當前的class。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.