遍历一个 prop，但按不同的 prop React JS 排序

Question

我有这个按缺陷（字符串）对数组进行排序的函数，但是，我想遍历计数（数字）。

getCount() {

let arr = this.state.rows
  let arr2 = arr.filter(qc => qc.BinsByDayByOrchardsQCs.length > 0).map((qc) =>
      qc.BinsByDayByOrchardsQCs.map((qc2) =>
          qc2.BinsByDayByOrchardsQCsDefects.map((qc3) => qc3).sort((a, b) 
              => a.Defect < b.Defect ? -1 : a.Defect > b.Defect ? 1: 0)));

        return arr2
    };

这个函数返回

0: {BinsByDayByOrchardsQCsID: "-LbiHz7tuuJH71I_4IKw", Defect: "Bruise", Count: 2, BinsByDayByOrchardsQCs: null}
1: {BinsByDayByOrchardsQCsID: "-LbiHz7tuuJH71I_4IKw", Defect: "Hail damage", Count: 0, BinsByDayByOrchardsQCs: null}
2: {BinsByDayByOrchardsQCsID: "-LbiHz7tuuJH71I_4IKw", Defect: "Scuff", Count: 2, BinsByDayByOrchardsQCs: null}
3: {BinsByDayByOrchardsQCsID: "-LbiHz7tuuJH71I_4IKw", Defect: "Sunburn", Count: 1, BinsByDayByOrchardsQCs: null}

我的数组已排序，但是在我的原始函数中，我想遍历 Count，而不是整个对象。

它看起来像这样..

 qc2.BinsByDayByOrchardsQCsDefects.map((qc3) => qc3.Count).sort((a, b) 
               => a.Defect < b.Defect ? -1 : a.Defect > b.Defect ? 1: 0)));

但我目前收到“类型‘数字’上不存在属性‘缺陷’

还应该注意的是，我将 TypeScript 与 React 一起使用

我的界面
BinsByDayByOrchardsQCs: { BinsByDayByOrchardsQCsDefects: { Defect: string, Count: number }[] }[]

Answer 1

您收到此错误的原因是，当您使用 map 时，它实际上会输出一个仅包含 count 值的数组

qc2.BinsByDayByOrchardsQCsDefects.map((qc3) => qc3.Count)

输出：

[2, 0, 2 , 1]

你应该先排序再映射，换一种方式试试：

qc2.BinsByDayByOrchardsQCsDefects.sort((a, b) => a.Defect < b.Defect ? -1 : a.Defect > b.Defect ? 1: 0))).map((qc3) => qc3.Count);

此外，您在这里对字符串进行排序，所以我不确定这是否会正常工作，但至少您不应该收到有关该属性不存在的错误。

更新：

我在你的帖子中错过了你正在使用 Typescript，试试这个看看它是否按照this post 的建议工作

qc2.BinsByDayByOrchardsQCsDefects.sort((a, b) => a.Defect < b.Defect ? -1 : a.Defect > b.Defect ? 1: 0))).map((qc3) => (qc3 as any).Count);

另一个建议是尝试使用qc3["Count"] 而不是qc3.Count，Typescript 不知何故不能平等地看待这件事......