从映射对象中删除空数组答案

【问题标题】：Remove empty arrays from mapped Object从映射对象中删除空数组
【发布时间】：2019-09-15 10:53:18
【问题描述】：

我正在使用下面的 sn-p 在网格上显示数据 `

{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 提供的解决方案结果相同

【问题讨论】：

标签： javascript arrays reactjs jsx

【解决方案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))}

【讨论】：

我在哪里插入这个？
这最终清空了我所有的数组
@invrt 你能分享一下你是如何使用这种方法的吗？
啊，是的，这有效...如何映射返回的结果？（让它为第一个 sn-p 工作）

【解决方案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))));

【讨论】：

【解决方案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>
   )
})}

让我知道这是否可行:)

【讨论】：

@invrt。对于那个很抱歉。在意识到我最初拥有的内容绝对不适用于您的场景后，我为您编辑了答案。你能试试这个吗。将其插入您正在执行 {} 的位置，就像您的示例中一样。
这最终清空了我所有的数组