React + Mobx observer class 添加 componentDidMount() 方法后组件不会重新渲染

Question

我发现了一个非常奇怪的 MobX 行为，我不知道为什么会这样。尝试 google 它但没有发现我遇到的问题。

所以，我有一个非常简单的 MobX 商店用于柜台：

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;

CounterMobx 是 React class 组件：

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() 生命周期方法添加到 CounterMobx 组件：

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

添加 componentDidMount() 之后，当我尝试通过操作（通过单击“-”或“+”按钮）更改计数值时，没有任何反应，组件停止跟踪存储中的可观察值

我做错了什么或者这是一个错误吗？

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

Answer 1

这似乎是 React 18 and <React.StrictMode> 的问题。如果您现在删除组件树顶部的 <React.StrictMode> 组件，它应该可以工作。

React + Mobx observer class 添加 componentDidMount() 方法后组件不会重新渲染

React + Mobx observer class component doesn't rerender after adding componentDidMount() method

javascript

reactjs

mobx

mobx-react