Question

我们有一个包含＆＃34; User＆＃34;的MobX商店。对象，有＆＃34;评论＆＃34; （数组）就可以了。

{
   user: {
       name: "",
       comments: []
   }     
}

在我们的视图中，我们希望显示按创建日期排序的评论

在视图中绑定值为this.props.store.user.comments.sort(...) 这看起来最初有效，但在注释中添加条目会破坏排序。

addComment = text => this.user.comments.push(....);

阅读https://github.com/mobxjs/mobx/issues/166

时

我开始认为我需要以其他方式向视图公开comments数组，如果我的商店以某种方式单独公开排序数组？

魔术很好，直到它停止工作，我在这里： - ）

在@ Tholle的回复之后，我尝试了各种各样的选择而没有运气。我得到`this.props.store.sortedEventLog.map不是函数``

我在做一些奇怪的事吗？

class ContactStore {
 constructor() {
  extendObservable(this, {
    loading: false,
    contact: {
      Name: "",
      Email: "",
      CellPhone: "",
      Phone: "",
      AllAreaOfExpertises: [],
      EventLog: [],
      qualityItems: [],
      Tags: []
    },
    AvailableTags: []
  });

  // this doesnt work
  // this.sortedEventLog = computed(() =>
  //   this.contact.EventLog.sort(
  //     (a, b) => b.Audit.Created.Date - a.Audit.Created.Date
  //   )
  // );
}

// this doesn't work either
// sortedEventLog = computed(() =>
//   this.contact.EventLog.sort(
//     (a, b) => b.Audit.Created.Date - a.Audit.Created.Date
//   )
// );

// this doesn't work either
// get sortedEventLog() {
//   return computed(() =>
//     this.contact.EventLog.sort(
//       (a, b) => b.Audit.Created.Date - a.Audit.Created.Date
//     )
//   );
// }

Answer 1

您可以使用computed并返回已排序的数组：

示例（JSBin）

class Store {
  @observable user = {
    name: "Eric",
    comments: [{
      text: 'First comment',
      date: Date.now()
    }]
  }

  @computed get sortedComments() {
    return this.user.comments.sort((a, b) => b.date - a.date);
  }

  addComment = text => this.user.comments.push({
    text: Math.random().toString(36).substring(7),
    date: Date.now()
  });
}

或者，您可以在addComment函数中使用replace在添加新文件时对其进行排序：

示例（JSBin）

class Store {
  @observable user = {
    name: "Eric",
    comments: [{
      text: 'First comment',
      date: Date.now()
    }]
  }

  @action addComment(text) {
    this.user.comments.push({
      text: Math.random().toString(36).substring(7),
      date: Date.now()
    });
    const sortedArray = this.user.comments.sort((a, b) => b.date - a.date);
    this.user.comments.replace(sortedArray);
  }
}

使用MobX对数组进行排序

1 个答案: