React 不渲染道具，但可以在 console.log 中看到答案

【问题标题】：React not rendering props but can see in console.logReact 不渲染道具，但可以在 console.log 中看到
【发布时间】：2019-09-12 05:11:23
【问题描述】：

在我的渲染中，我有这个const arr = []

在我回来的时候我有这个

{
    this.state.rows.map((qc) =>
        qc.BinsByDayByOrchardsQCs.map((qc2) =>
            qc2.BinsByDayByOrchardsQCsDefects.map((qc3) =>
              {!arr.includes(qc3.Defect) && arr.push(qc3.Defect) &&
                (<div className="row table">
                    <div className="column-label bold">{qc3.Defect}</div>
                    {console.log("testing", qc3.Defect)}
                </div>)
              }
            ) 
        )
    )
}

在我的 console.log 中，我实际上可以看到 4 个结果，这是我想要的结果。它看起来像这样：

testing Scuff
testing Sunburn
testing Bruise
testing Hail damage

关于为什么页面上什么都没有呈现的任何想法？

【问题讨论】：

删除第 5 行（代码）中的{}：(!arr.includes(qc3.Defect) && arr.push(qc3.Defect) && (<div className="row table"> <div className="column-label bold">{qc3.Defect}</div> {console.log("testing", qc3.Defect)} </div>) ) 或使用return

标签： javascript arrays reactjs object ecmascript-6

【解决方案1】：

因为你有花括号{}，你需要将它们更改为括号() 或使用明确的return 语句：

qc2.BinsByDayByOrchardsQCsDefects.map((qc3) =>
    {!arr.includes(qc3.Defect) && arr.push(qc3.Defect) &&
        (<div className="row table">
            <div className="column-label bold">{qc3.Defect}</div>
            {console.log("testing", qc3.Defect)}
        </div>)
      )
    )

【讨论】：