Question

我有以下数据结构（对象数量不仅限于五个）：

Object {name: "objectName}, data: Array}
Object {name: "objectName}, data: Array}
Object {name: "objectName}, data: Array}
Object {name: "objectName}, data: Array}
Object {name: "objectName}, data: Array}

data属性是一个多维Array，其中包含以下结构的对象（它们的编号也不受限制）：

[
    {
        property: "value",
        property2: "value"
    },
    {
        property: "value",
        property2: "value"
    }
]

我在访问这些对象时遇到了麻烦，我想显示它们的值。以下是我正在使用的内容：

Object.keys(this.state.items).map((k, index) => <li key={index}>{ `${k}: ${this.state.items[k]}` }</li>

它给了我以下输出：

name: propertyName
data: [object Object],[object Object], [n, n]

其中n表示无限数量的对象。那么我怎样才能正确地遍历这个结构以最终获得object值？我想将其显示为

{item.property}

等等。提前谢谢！

Answer 1

迭代项目，然后迭代每个项目的数据。

  class App extends React.Component {
      state = {
        items: [
          {
            id: 1,
            name: 'name 1',
            data: [
              { id: 1, property: 'Property 1' },
              { id: 2, property: 'Property 2' }
            ],
          },
          {
            id: 2,
            name: 'name 2',
            data: [
              { id: 1, property: 'Property 3' },
              { id: 2, property: 'Property 4' }
            ],
          }
        ]
      }
      render() {
        return (
          <ul>
            {this.state.items.map((row) => {
              return (
                <li key={row.id}>
                  <div>{row.name}</div>
                  <ul>
                    {row.data.map(innerRow => {
                      return <li key={innerRow.id}>{innerRow.property}</li>
                    })}
                  </ul>
                </li>
              )
            })}
          </ul>
        )
      }
    }

在React中迭代数组的对象

1 个答案: