MobX修改状态未触发React TypeScript组件重排问题求助

• 给组件添加observer装饰器
  组件必须通过mobx-react-lite的observer包裹，才能让MobX追踪状态变化并触发重渲染。示例代码：

  import { observer } from "mobx-react-lite";
  
  const TodoList = observer(() => {
    // 组件逻辑与渲染内容
  });
  

• 确保store状态被MobX监听
  用makeAutoObservable简化store配置，它会自动将类属性转为observable，方法转为action：

  import { makeAutoObservable } from "mobx";
  
  class TodoStore {
    todos = [];
  
    constructor() {
      makeAutoObservable(this);
    }
  
    addTodo(todo) {
      this.todos.push(todo);
    }
  }
  

  也可以手动用@observable和@action装饰器，但makeAutoObservable更简洁。

• 状态修改必须在action中执行
  不要直接在组件里修改store的observable属性，要通过store的action方法来修改，这样MobX才能正确捕获状态变更。

针对你的场景，优先检查代码沙箱里的组件是否遗漏了observer包裹，这是此类问题最常见的诱因。

内容的提问来源于stack exchange，提问作者Nigel Davis