javascript - 使用具有多个属性的对象迭代对象数组

Question

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

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 未定义。

Answer 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 项目来定义任何正在呈现的 Prop :

filter(product => !!product)

希望对您有所帮助!