javascript - 如何在 React.js 中使用重复循环

Question

如何在 React.js 中使用重复循环？

我有数组中的数组，我想使用它。

我有一个数组。对象在数组中。另一个数组在这些对象中。

state = {
  myInformation: [
    {
      name: "jessie",
      age: 27,
      interests: ["react", "vue"]
    },
    {
      name: "ellie",
      age: 26,
      interests: ["java", "spring"]
    }
  ]
}

...

const information = this.state.myInformation.map(
  ({name, age, interests}) => (
    <div>{name}</div>
    <div>{age}</div>
    <div>{interests}</div>
  )
)

...

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

标签： javascriptreactjsecmascript-6

Answer 1

在里面使用另一个map()。

const information = this.state.myInformation.map(
  ({name, age, interests}) => (
    <div>{name}</div>
    <div>{age}</div>
    <div>{interests.map(interest => <div>{interest}</div>)}</div>
  )
)