Question

您好我正在尝试迭代我从数据库获取的一些数据，它是一个对象的对象

this.state.data: {
  someGuy:{  
    cardHeading:"someHeading"
    email:"somemail@gmx.de"
    begin:"13-02-2018"
    end:"15-02-2018"
    message:"some Message"
    days: "2 Tage"
    turnover: 123
    url:"someUrl"
  },
  secondGuy: {
    cardHeading:"secondHeading"
    email:"second@gmx.de"
    begin:"13-03-2018"
    end:"15-04-2018"
    message:"second Message"
    days: "many days"
    turnover: 321
    url:"someUrl"
  }
}

现在我正在尝试在react-bootstrap媒体组件中映射此数据

{ this.state.data.map((d) => {
    return(
      <Media>
        <Media.Left align="top">
          <img width={64} height={64} src={d.url} alt="placeholder thumbnail"  />
        </Media.Left>
        <Media.Body>
          <Media.Heading>{d.cardHeading}</Media.Heading>
          <p>{d.begin}</p>
          <p>{d.end}</p>
          <p>{d.days}</p>
          <p>{d.turnover}</p>
          <p>{d.email}</p>
          <p>{d.message}</p>
        </Media.Body>
      </Media>
    )
  })
}

我知道我可以用地图迭代一个数组。我如何在对象中执行此操作？先感谢您。

Answer 1

使用Object.keys，您将得到一个对象键数组，在这种情况下将是["someGuy", "secondGuy"]，现在您可以迭代它们并获取父对象的所有对象。

你可以这样做：

render () {
  const { data } = this.state
  const keys = Object.keys(data)
  return keys.map((key) => {
    const d = data[key]
    return (
      <Media>
        <Media.Left align="top">
          <img width={64} height={64} src={d.url} alt="placeholder thumbnail" />
        </Media.Left>
        <Media.Body>
          <Media.Heading>{d.cardHeading}</Media.Heading>
          <p>{d.begin}</p>
          <p>{d.end}</p>
          <p>{d.days}</p>
          <p>{d.turnover}</p>
          <p>{d.email}</p>
          <p>{d.message}</p>
        </Media.Body>
      </Media>

    )
  })
}

Answer 2

您可以尝试Object.getOwnPropertyNames（）。它将对象的所有键名称作为数组返回，然后您可以使用object []来获取值。

迭代对象的对象

2 个答案: