Question

我有两个模型：包含消息文本（可观察）的MessageModel和包含这些MessageListModel对象（也可观察）的列表的MessageModel。

我对邮件列表的每次更改都注册了mobx.autorun()。

但是，autorun会在从列表添加/删除邮件时触发，但不会在更改现有邮件的文本时触发。

示例：

我的MessageListModel：


import { observable, decorate } from "mobx";
import MessageModel from "./MessageModel";
import * as mobx from "mobx";

class MessageListModel {

  messages = [];

  constructor() {
        mobx.autorun(() => {
          console.log('Autorun triggered!');
          console.log(this.messages.length);
        });
    }

  addMessage(text) {
    this.messages.push(new MessageModel({ messageList: this, text: text }));
  }

  getMessageText(index) {
    return this.messages[index].text;
  }

  setMessageText(index, messageText) {
    this.messages[index].text = messageText;
  }
}

decorate(MessageListModel, {
  messages: observable,  // don't wanna use decorator syntax
})


export default MessageListModel;

我的MessageModel：


import { observable, computed, action, decorate } from "mobx";
import {observer} from "mobx-react";

class MessageModel {

  constructor({messageList, text}) {
    this.text = text;
    this.messageList = messageList;
  }

  text = undefined;
}

decorate(MessageModel, {
  text: observable,
})


export default MessageModel;

尝试运行此命令

const messageList = new MessageListModel();

messageList.addMessage('msg1');   // triggers autorun
messageList.addMessage('msg2');   // triggers autorun

messageList.setMessageText(1, 'other text');  // does not trigger autorun
messageList.setMessageText(0, 'other text');  // does not trigger autorun either

我如何使它观察到我的消息的变化，而不是其数量的变化？

Answer 1

在您的autorun方法中，您只能监听消息数组length中的更改，因此该autorun中唯一可以跟踪的内容函数是数组的length属性。

尝试将autorun更改为此，以查看区别：

mobx.autorun(() => {
  console.log('Autorun triggered!');
  console.log(this.messages.length);

  this.messages.map((model)=>{
    console.log(model.text)
  })      
});

在上面的示例中，我们正在访问text上的model属性，因此，只要您在任何模型上更改text，就会执行autorun。

因此，autorun仅在显式跟踪（在函数内部访问）的属性更改时运行。

mobx：如何观察嵌套对象的变化？

1 个答案: