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

Question

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

应用程序.js：

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

增量按钮.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>
  );
});

根存储.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;

初始状态.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 。

从initialState中删除increment并将increaseNumber写为

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