从映射对象中删除空数组

Posted 2023-02-22

【中文标题】从映射对象中删除空数组

【英文标题】：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 提供的解决方案结果相同

【参考方案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。对于那个很抱歉。在意识到我最初拥有的内容绝对不适用于您的场景后，我为您编辑了答案。你能试试这个吗。将其插入您正在执行 的位置，就像您的示例中一样。

这最终清空了我所有的数组