Mobx Observer在Observable变更时未重新渲染求助

我帮你梳理了代码里可能导致这个问题的几个关键点，对应给出修复方案：

1. 检查NotificationsStore的Observable定义与更新逻辑 #

首先确认你的Store里的状态是否正确被标记为可观察对象，并且状态更新是在MobX的action中执行的：

• 确保需要被观察的属性（比如通知列表、未读数量等）使用了@observable装饰器（或者makeObservable方法）
• 所有修改这些属性的操作必须包裹在@action装饰的方法里，比如：

@action
addNotification(notification) {
  this.notifications.push(notification);
  this.unreadCount += 1;
}

如果直接在action外修改observable属性，MobX无法追踪到变更，自然不会触发observer组件的重渲染。

2. 确认Store的注入与组件的关联 #

检查Store入口文件和页面组件的连接是否正确：

• 确保根组件已经用Provider包裹，并传入了所有需要的Store：

import { Provider } from 'mobx-react';
import { notificationsStore } from './stores';

const App = () => (
  <Provider notificationsStore={notificationsStore}>
    {/* 你的应用路由/页面 */}
  </Provider>
);

• 页面组件需要用inject装饰器获取对应的Store，并且同时使用@observer装饰：

import { inject, observer } from 'mobx-react';

@inject('notificationsStore')
@observer
class NotificationsScreen extends React.Component {
  render() {
    const { notificationsStore } = this.props;
    // 直接使用store的observable属性
    return (
      <View>
        <Text>未读通知：{notificationsStore.unreadCount}</Text>
        {notificationsStore.notifications.map(notification => (
          <Text key={notification.id}>{notification.content}</Text>
        ))}
      </View>
    );
  }
}

注意：inject和@observer的顺序不能搞反，必须先inject再observer。

3. 避免在Render中使用间接引用或解构丢失响应性 #

如果在render函数里先解构了observable属性，然后再使用，可能会丢失响应性：
❌ 错误示例：

render() {
  const { unreadCount } = this.props.notificationsStore;
  // 这里的unreadCount是普通值，不会触发重渲染
  return <Text>{unreadCount}</Text>;
}

✅ 正确做法：
直接通过store实例访问属性，保持响应性：

render() {
  return <Text>{this.props.notificationsStore.unreadCount}</Text>;
}

或者在函数组件中使用useLocalObservable，始终保持对store的直接引用。

4. 检查是否使用了不可变数据结构导致追踪失效 #

如果你的observable是数组或对象，直接替换整个数组/对象而不是修改内部元素，MobX是可以追踪的，但要确保操作是在action里执行：

@action
markAllAsRead() {
  this.notifications = this.notifications.map(n => ({ ...n, read: true }));
  this.unreadCount = 0;
}

这种替换整个数组的操作是没问题的，但一定要放在action方法内。

最后验证步骤 #

1. 在修改observable属性的地方加个console.log，确认状态确实发生了变更
2. 在组件的render函数里加console.log('render triggered')，看状态变更时是否打印
3. 如果还是没触发，检查是否有组件被React.memo或其他优化包裹，这时候需要确保memo的依赖项包含observable的变化

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