mobx-react lite:无法读取未定义的属性

Question

我有一个简单的组件，它只是在屏幕上增加值，但是我收到了一个错误：Uncaught TypeError: Cannot read properties of undefined (reading 'value') at increment (initialState.js:11:7)。

App.js：

return (
    <IncrementButton store={Store} />
);

IncrementButton.js：

import {observer} from 'mobx-react-lite';
import React from 'react';

export const IncrementButton = observer(({store}) => {
  return (
    <div>
      <button onClick={store.rebate.increment}>Increase</button>
      <h1>{store.rebate.value}</h1>
    </div>
  );
});

rootStore.js：

import {makeAutoObservable} from 'mobx';
import {initialState} from './initialState';

class RootStore {
  states = initialState;

  constructor() {
    makeAutoObservable(this);
  }
  increaseNumber = () => {
    this.states.rebate.increment();
  };
}

const Store = new RootStore();
export default Store.states;

initialState.js：

export const initialState = {
  rebate: {
    id: 1,
    name: 'Example',
    value: 3000,
    increment() {
      this.value = this.value++;
    },
  },
};

由于我是从mobx-react-lite开始的，而且只有mobx-react-lite，所以我也在学习新的技巧。似乎很难找到仅关于mobx-react-lite的文档。非常感谢！！

Answer 1

this是initialState的“方法”中的undefined。

从increment中删除initialState，并将increaseNumber写为

increaseNumber = () => {
  this.states.rebate.value += 1;
}