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

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

让我知道是否可以解决：）

Answer 3

我认为您可以在循环之前先过滤数组

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

从映射的对象中删除空数组

3 个答案: