Удалить пустые массивы из сопоставленного объекта

Question

Я отображаю данные в сетке с использованием фрагмента снизу `

{this.state.rows.map((qc) => 
   <div className="column table">
       <div className="row label">
           <div className="column-label qc-number hover-false">{}</div>
               <div className="divider"></div>
                    <div className="column-label qc-date-label">{qc.CreatedOn.replace(",","")}</div>
                       <img className="info" src="../ClientApp/images/Info.svg"></img>
                                </div>
                                {qc.BinsByDayByOrchardsQCs.map((qc2) =>
                                    qc2.BinsByDayByOrchardsQCsDefects.map((qc3) =>
                                        <div onChange={this.removeEmpty} className="row table">{qc3.Count}</div>
                                 ))}
                                <div className="row table total">13</div>   
                            </div>)}

`

Это возвращает довольно мало данных, так что я вроде сделал простой console.log, который отражает данные, которые я получаю.

{console.log("console", this.state.rows.map((qc) =>
    qc.BinsByDayByOrchardsQCs.map((qc2) =>
         qc2.BinsByDayByOrchardsQCsDefects)))}

Что возвращает

0: []
1: []
2: []
3: [Array(4)]
4: [Array(4)]
5: [Array(4)]
6: [Array(4)]
7: []
8: []
9: [Array(4)]
10: []

Как видите, я получаю довольно много пустых объектов, которые React отображает и отображает. Как мне удалить эти пустые объекты? Я знаю о файле array.filter, но не знаю, как применить его к моему JSX

РЕДАКТИРОВАТЬ: Попытка при первом решении дано

{console.log("console", this.state.rows.map((qc) =>
  qc.BinsByDayByOrchardsQCs.filter(({length}) => length > 0).map((qc2) =>
      qc2.BinsByDayByOrchardsQCsDefects)))}

возвращает

0: []
1: []
2: []
3: []
4: []
5: []
6: []
7: []
8: []
9: []
10: []

Те же результаты, что и у @ yourfavouritedev

Answer 1

Вы можете проверить атрибут length.

this.state.rows.map(...).filter(({length}) => length > 0);

В соответствии с вашим подходом

{console.log("console", this.state.rows.map((qc) =>
    qc.BinsByDayByOrchardsQCs.map((qc2) =>
      qc2.BinsByDayByOrchardsQCsDefects)).filter(({length}) => length > 0))}

Answer 2

Я думаю, вы можете отфильтровать массив перед циклом

this.state.rows.filter(qc => qc.BinsByDayByOrchardsQCs.length > 0)
    .map(qc => qc.BinsByDayByOrchardsQCs
        .map(q2 => q2.BinsByDayByOrchardsQCsDefects
            .map(q3 => console.log(q3.count))));

Если ваш BinsByDayByOrchardsQCsDefects тоже будет пустым, вы можете снова выполнить фильтрацию.

this.state.rows.filter(qc => qc.BinsByDayByOrchardsQCs.length > 0)
    .map(qc => qc.BinsByDayByOrchardsQCs
        .filter(q2 => qc2.BinsByDayByOrchardsQCsDefects.length > 0)
    .map(q3 => q3.BinsByDayByOrchardsQCsDefects
        .map(q4 => console.log(q4.count))));

Answer 3

Array.filter, вероятно, будет вашим лучшим вариантом.В вашем случае вы бы сделали что-то вроде.

 {(qc.BinsByDayByOrchardsQCs.map((qc2) => qc2.BinsByDayByOrchardsQCsDefects).filter((arrays) => arrays.length > 0 ).map((qc3) => {
   return (
     <div onChange={this.removeEmpty} className="row table">{qc3.Count}</div>
   )
})}

Дайте мне знать, если это сработает:)