MobX computed函数失效求助：日期格式化计算属性不生效

看起来你的计算属性逻辑本身是没问题的，但大概率漏掉了关键的配置步骤，导致组件无法响应计算属性的变化。下面是具体的排查和解决方法：

1. 确保组件被observer装饰 #

这是最常见的原因：如果你的React组件没有用MobX的observer高阶组件包裹，就算计算属性的值发生了变化，组件也不会自动重新渲染。

操作步骤： #

• 先导入observer：

  import { observer } from 'mobx-react'; // 类组件、函数组件通用，函数组件也可使用mobx-react-lite的observer
  

• 用observer装饰你的组件：
  • 类组件写法：

    @observer
    class YourComponent extends React.Component {
      @observable user = { name: 'john', birth_date: 1523020350 };
      
      @computed get userBirthdayString() {
        return moment(this.user.birth_date).format('MM-DD-YYYY');
      }
    
      // 若使用MobX 6+，必须在构造函数中添加这行
      constructor(props) {
        super(props);
        makeAutoObservable(this); // 自动识别所有装饰过的成员，无需手动配置
        // 也可以手动指定（按需精细控制）：
        // makeObservable(this, {
        //   user: observable,
        //   userBirthdayString: computed
        // });
      }
    
      render() {
        return <Text>Birthday: {this.userBirthdayString}</Text>;
      }
    }
    

  • 函数组件写法：

    const YourComponent = observer(() => {
      const user = observable({ name: 'john', birth_date: 1523020350 });
      
      const userBirthdayString = computed(() => moment(user.birth_date).format('MM-DD-YYYY')).get();
    
      return <Text>Birthday: {userBirthdayString}</Text>;
    });
    

2. 适配MobX 6+版本的要求 #

如果你用的是MobX 6及以上版本，仅靠@observable和@computed装饰器是不够的，必须在类的构造函数中调用makeObservable或makeAutoObservable，让MobX明确识别这些装饰的成员。

3. 检查observable对象的修改方式 #

确保你是修改observable对象的属性（而非替换整个对象，当然替换对象也能触发更新，但属性修改更直接）：

• 正确修改属性的方式：

  // 修改birth_date属性，会触发计算属性更新
  this.user.birth_date = 1609459200;
  

• 替换整个对象也可行：

  this.user = { ...this.user, birth_date: 1609459200 };
  

为什么之前用autorun有效？ #

因为autorun是MobX自带的反应式函数，它会自动追踪内部用到的observable依赖，依赖变化时自动执行。但React组件本身不具备这种自动追踪能力，必须通过observer高阶组件把组件变成反应式组件，这样MobX才能在observable或computed变化时触发组件重新渲染。

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