观察者不使用 useLocalObservable

Question

import { Observer, useLocalObservable } from 'mobx-react-lite';

function App() {
  const { count, decrement, increment } = useLocalObservable(() => ({
    count: 0,
    increment() { this.count++ },
    decrement() { this.count-- },
  }));

  return (
    <div>
      <Observer>{() => (<div>{count}</div>)}</Observer>
      <button onClick={() => { decrement() }} >decrement</button>
      <button onClick={() => { increment() }} >increment</button>
    </div>
  );
}

Observer 无法使用 useLocalObservable.when 我点击按钮没有任何更新。是什么原因？

Answer 1

Observer 跟踪在其中取消引用的所有可观察数据，并在可观察数据发生变化时 re-renders。当您从 Observer 外部的可观察对象中取消引用 count 时，从那一点开始它只是一个常规的 JavaScript 数字，因此 Observer 没有任何东西可以跟踪。

您可以改为在 Observer 中取消引用它，它会起作用：

import { Observer, useLocalObservable } from 'mobx-react-lite';

function App() {
  const state = useLocalObservable(() => ({
    count: 0,
    increment() { state.count++ },
    decrement() { state.count-- },
  }));

  return (
    <div>
      <Observer>{() => <div>{state.count}</div>}</Observer>
      <button onClick={state.decrement}>decrement</button>
      <button onClick={state.increment}>increment</button>
    </div>
  );
}

观察者不使用 useLocalObservable

Observer not working with useLocalObservable

typescript

reactjs

mobx