React＆＃x2B;添加componentdidmount（）方法后，mobx观察者类组件不dy rerender

Question

我发现了一种非常奇怪的MOBX行为，我不知道为什么会发生。试图谷歌搜索它，但没有发现我面临的问题。

因此，我有一个非常简单的MOFX商店，用于计数器：

import { makeAutoObservable } from "mobx";

class CounterStore {
  constructor(initialState) {
    this.count = initialState ?? 0;

    makeAutoObservable(this);
  }

  dec = () => this.count--;

  inc = () => this.count++;

  get color() {
    return this.count > 0 ? "green" : this.count < 0 ? "red" : "black";
  }
}

export default CounterStore;

contrymobx是React类组件：

import { observer } from "mobx-react";
import { Component } from "react";

import CounterStore from "../../stores/CounterStore";

const store = new CounterStore(1);

const CounterMobx = observer(
  class extends Component {
    render() {
      return (
        <div>
          <button onClick={store.dec}>-</button>
          <span style={{ color: store.color }}>{store.count}</span>
          <button onClick={store.inc}>+</button>
        </div>
      );
    }
  }
);

export default CounterMobx;

一切正常，直到我添加ComponentDidMount（） lifecycle方法到contrymobx组件：

componentDidMount() {
  console.log(store);
}

添加ComponentDidMount（）之后停止跟踪商店中可观察的值，

我做错了什么还是这是一个错误？

"react": "^18.1.0",
"mobx": "^6.6.0",
"mobx-react": "^7.5.0",

Answer 1

这似乎是 react 18 and react 18 and ＆lt react.StrictMode＆gt;。如果删除组件树顶部的＆lt; react.strictmode＆gt;组件现在应该可以使用。