Массив отсортирован, но 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"

Однако, реакция на самом деле делает его "Солнечный ожог, ушиб, урон от града, скфф" - в основном неупорядоченный

Как мне получить вывод, напечатанный на моем 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()}               
}