javascript - 数组已排序，但 React 未按排序顺序渲染

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

这是一个简单的工作示例，供您作为代码片段引用!

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

ReactDOM.render(
  <App />,
  document.body
);

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

但是你的代码有如此多的缺陷，它根本没有意义。 对于初学者来说，您正在对缺陷数组进行排序，但您正在显示(渲染)qc3 数组中的值!

将生成用于显示的字符串的函数移至另一个函数中。我已经修复了其余的实现，使其更具可读性!

getDisplayValues() {
    let displayedDefects = [];
    this.state.rows.map((qc) =>
        qc.BinsByDayByOrchardsQCs.map((qc2) =>
            qc2.BinsByDayByOrchardsQCsDefects.map((qc3) =>
                if(defectsArray.includes(qc3.Defect)){
                    displayedDefects.push(qc3.Defect);
                }
            )
        )
    );

    displayedDefects.sort();

    return displayedDefects.map((defect)=>( 
      <div className = "row label" >
          <div className = "column-label bold" > {defect} </div>
      </div> );

}

render(){
    return {this.getDisplayValues()}               
}