Mobx makeAutoObservable 不绑定这个

Question

我用一个简单的 MobX 商店构建了一个基本的计数器 React 应用程序。我能够使用

makeObservable

创建可观察的 MobX 状态，但由于某种原因，当我尝试使用

makeAutoObservable

时，我收到错误

Cannot read property 'counter' of undefined

我如何错误地使用

makeAutoObservable

？

商店

import { makeAutoObservable, makeObservable, action, observable } from "mobx";

class SampleStore {
  counter = 0;

  constructor(arg) {
    makeAutoObservable(this);
    // makeObservable(this, {
    //   counter: observable,
    //   increment: action.bound,
    //   decrement: action.bound,
    // });
  }

  increment() {
    this.counter++;
    return this.counter;
  }

  decrement() {
    this.counter--;
    return this.counter;
  }
}

export default SampleStore;

使用Store钩子

import { createContext, useContext } from "react";

import SampleStore from "./SampleStore";

export const store = {
  sampleStore: new SampleStore(),
};

export const StoreContext = createContext(store);

export const useStore = () => {
  return useContext(StoreContext);
};

提供商

import { store, StoreContext } from "./stores";
import Index from "./layout/Index";

function App() {
  return (
    <StoreContext.Provider value={store}>
      <Index />
    </StoreContext.Provider>
  );
}

export default App;

反应组件

import { useStore } from "../stores";
import { observer } from "mobx-react";

const Index = (props) => {
  const store = useStore();
  const {
    sampleStore: { counter, increment, decrement },
  } = store;
  return (
    <>
      <h1>MobX and React.js example</h1>
      <p>{counter}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </>
  );
};

export default observer(Index);

Answer 1

您还可以在 makeAutoObservable 的选项中使用 autoBind: true:

constructor(arg) {
  makeAutoObservable(this, {}, { autoBind: true });
}

这将自动绑定您的所有操作 - 因此您不会在解构时丢失上下文

Answer 2

它抛出是因为你的方法在调用时丢失了上下文（

this

）（因为你已经解构了它们）。

它正在与

makeObservable

一起使用，因为您正在使用

action.bound

，它将方法自动绑定到实例上下文。

如果您想要与

makeAutoObservable

相同的功能，您需要使用箭头功能，如下所示：

class SampleStore {
  counter = 0;

  constructor(arg) {
    makeAutoObservable(this);
  }

  // Make it arrow function
  increment = () => {
    this.counter++;
    return this.counter;
  }
  
  // Make it arrow function
  decrement = () => {
    this.counter--;
    return this.counter;
  }
}

或者，您也可以使用

autoBind

选项来

makeAutoObservable

:

constructor(arg) {
  makeAutoObservable(this, {}, { autoBind: true });
}

Answer 3

尽量不要那样破坏商店。 解构时，任何原始变量将保持最新值并且不再可观察。 您还需要

bind

点击方法返回商店。

import { useStore } from "../stores";
import { observer } from "mobx-react";

const Index = (props) => {
  const {sampleStore:store} = useStore();

  return (
    <>
      <h1>MobX and React.js example</h1>
      <p>{store.counter}</p>
      <button onClick={store.increment.bind(store)}>+</button>
      <button onClick={store.decrement.bind(store)}>-</button>
    </>
  );
};

export default observer(Index);