javascript - 迭代一个 prop，但按不同的 prop 排序 React JS

Question

我有这个函数可以按 Defect(string) 对数组进行排序，但是，我想迭代 Count(number)。

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

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

还应该注意的是，我正在使用 TypeScript 和 React

我的界面
BinsByDayByOrchardsQCs: { BinsByDayByOrchardsQCsDefects: { 缺陷:字符串，计数:数字 }[] }[]

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 不知怎的并不能平等地感知这个东西......