使用具有多个属性的对象迭代对象数组答案

【问题标题】：Iterate over an array of objects with object having multiple properties使用具有多个属性的对象迭代对象数组
【发布时间】：2018-11-21 01:50:45
【问题描述】：

我正在尝试迭代以下内容：

state = {
 products : [
  {
   x : "sd",
   y : "fdg"
  },  {
   x : "sdx",
   y : "fdgx"
  }
 ]
}

我需要遍历上面的产品数组和内部对象来创建：

<tr><td>sd</td><td>fdg</td></tr>

我尝试使用：

{
    this.state.products.map(function(prod) { 

        return <tr><td>{prod.x}</td><td>{prod.y}</td></tr>;
    })
}

但得到多个错误并且 prod 未定义。

【问题讨论】：

@CertainPerformance 更新代码

标签： javascript reactjs

【解决方案1】：

组件中其他地方的逻辑可能正在改变状态，而这又可能是渲染期间引发错误的根本原因。

请务必检查products 数组在您的组件state 中的定义是否一致，并且该数组中的项是否已定义。

这里的一个解决方案可能是采取更具防御性的方法来呈现表格行元素，方法是执行以下操作：

{
    Array.isArray(this.state.products) && this.state.products
    .filter(product => !!product)
    .map(product => { 

        return <tr><td>{product.x}</td><td>{product.y}</td></tr>;
    })
}

这里，渲染逻辑通过Array.isArray() 断言this.state.products 是预期的数组类型。此外，该逻辑确保通过首先通过此行过滤掉任何未定义的prop 项目来定义正在呈现的任何道具：

filter(product => !!product)

希望有帮助！

【讨论】：

【解决方案2】：

问题在于 return 语句是导致问题的 HTML 代码，而您可以将代码编码为字符串，DOM 会将其视为 HTML 代码

this.state.products.map(function(prod){  return "<tr><td>"+prod.x+"</td><td>"+prod.y +"</td> </tr>" }).

【讨论】：

【解决方案3】：

您需要将其添加到一个变量返回中，如下所示：

const prod = this.state.products.map(function(prod) { 
    return <tr><td>{prod.x}</td><td>{prod.y}</td></tr>;
});

在渲染生命周期中使用变量，如下所示。

{prod}

这是jsFiddle中附加的工作代码

希望这会有所帮助！

【讨论】：