我如何在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>

Answer 1

您要以“兴趣”显示项目吗？

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

Answer 2

在内部使用另一个 map（）。

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