Question

我有以下代码。

{
     this.state.rows.map((qc) =>
         qc.BinsByDayByOrchardsQCs.map((qc2) =>
             qc2.BinsByDayByOrchardsQCsDefects.map((qc3) => 
                !defectsArray.includes(qc3.Defect) && defectsArray.sort() && defectsArray.push(qc3.Defect) &&
                  (<div className="row label">
                        <div className="column-label bold">{qc3.Defect}</div>
                    </div>)
           )
         )
      )
   }

当我使用console.log("DefectsArray",defectsArray)

我的数组在控制台中打印并排序（我想要的顺序）

0: "Bruise"
1: "Hail damage"
2: "Sunburn"
3: "Scuff"

但是，react实际上将其渲染为“晒伤，瘀伤，冰雹损害，磨损”-基本上是无序的

如何实现console.log中打印的输出？

编辑：在对象内部。

`Array(20)
0:
BinsByDayByOrchardsAreas: null
BinsByDayByOrchardsCountries: null
BinsByDayByOrchardsPickers: null
BinsByDayByOrchardsQCs: Array(1)
0:
BinsByDayByOrchards: null
BinsByDayByOrchardsID: null
BinsByDayByOrchardsQCsDefects: Array(4)
0: {BinsByDayByOrchardsQCsID: "-LbiHz7tuuJH71I_4IKw", Defect: "Sunburn", Count: 1, BinsByDayByOrchardsQCs: null}
1: {BinsByDayByOrchardsQCsID: "-LbiHz7tuuJH71I_4IKw", Defect: "Bruise", Count: 2, BinsByDayByOrchardsQCs: null}
2: {BinsByDayByOrchardsQCsID: "-LbiHz7tuuJH71I_4IKw", Defect: "Hail damage", Count: 0, BinsByDayByOrchardsQCs: null}
3: {BinsByDayByOrchardsQCsID: "-LbiHz7tuuJH71I_4IKw", Defect: "Scuff", Count: 2, BinsByDayByOrchardsQCs: null}

`

Answer 1

这是一个简单的工作示例，仅供参考！

 DeviceListItems.CollectionChanged += itemDisplayList_CollectionChanged;

  void itemDisplayList_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
        {

        }

function App(){
  return(
    [ "Hail damage", "Sunburn","Bruise","Scuff"].sort().map((s)=><div>{s}</div>)
  );
}

ReactDOM.render(
  <App />,
  document.body
);

但是您的代码有这么多缺陷，根本没有任何意义。首先，您正在对缺陷数组进行排序，但是要显示（渲染）qc3数组中的值！

移动函数以生成字符串以显示到另一个函数中。我已经修复了其余的实现，以提高可读性！

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

数组已排序，但React并未按排序顺序呈现

1 个答案: