Javascript 用MobX排序数组

我们有一个MobX存储，其中包含一个“User”对象，上面有“Comments”（数组）

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

在视图中，绑定值是this.props.store.user.comments.sort（…） 这看起来一开始是可行的，但向注释中添加条目会破坏排序

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

读书时

我开始认为我需要以其他方式向视图公开注释数组，我的存储是否应该以某种方式单独公开排序数组

魔法是美好的，直到它停止工作，我在这里：-）

在@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
//     )
//   );
// }

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

示例（）

或者，您可以在添加新注释时，在

addComment

函数中对它们进行排序：

示例（）

---

我已经尝试了各种各样的选择，现在没有运气，请看上面的编辑。有什么想法吗？（我没有装饰师的支持）@RogerJohansson你有没有偶然发现

@computed get propertyName（）{}基本上是构造函数调用中可扩展服务（这，{propertyName:get func（）{}}）的糖分。

因此您可以尝试

可扩展服务（这，{…，sortedEventLog:computed（函数（）{返回this.contact.EventLog.sort（（a，b）=>b.Audit.Created.Date-a.Audit.Created.Date）；}）

我现在真的觉得自己很愚蠢。天啊。。你看b.date-a.date。。。。日期是ISO字符串格式。。。string-string=NaN。。。

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
//     )
//   );
// }

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()
  });
}

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);
  }
}