Question

我正在尝试遍历以下内容：

int

我需要遍历上述产品数组和内部对象以创建：

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

我尝试使用：

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

但出现多个错误，并且产品未定义。

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>;
    })
}

在这里，渲染逻辑通过this.state.products断言Array.isArray()是期望的数组类型。另外，该逻辑可确保首先通过此行滤除所有未定义的prop项来定义要渲染的道具：

filter(product => !!product)

希望有帮助！

Answer 2

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

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

Answer 3

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

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

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

{prod}

这是jsFiddle

中所附的工作代码

希望这会有所帮助！

遍历具有多个属性的对象的对象数组

3 个答案: