Question

这是我的App.js文件：

     import React, { Component } from 'react';
     import SongData from './songData';

     export default class App extends Component {

     render() {

      return(
        <div>
        {JSON.stringify(SongData)}
        </div>
      )
     }
   }

SongData是在另一个名为songData：

的文件中定义和导出的变量

   [{
    "active": 1,
    "createdAt": "2016-11-02T18:08:26.103Z",
    "difficulty": "Medium"
},
{
    "active": 0,
    "createdAt": "2013-10-02T18:08:26.103Z",
    "difficulty": "Difficult"
},
{
    "active": 1,
    "createdAt": "2015-12-02T18:08:26.103Z",
    "difficulty": "Easy"
}
]

我想要做的是在我的App.js文件中迭代所有JSON数组并打印出表中每首歌曲的active，createdAt和难度。

我没有尝试过for循环和地图，但是没有成功。有什么想法吗？

Answer 1

我认为这样的事情应该有效：

import React, { Component } from 'react';
import SongData from './songData';

export default class App extends Component {

  songItems = () => {
    return SongData.map(s => {
      return <li>{s.active}</li>
    })
  }

  render() {

   return(
     <ul>
     {this.songItems()}
     </ul>
   )
  }
}

我正在创建一个返回List组件数组的方法，然后在App的render方法中调用该方法。

如何迭代JSON数组并在React中的表中显示数据

1 个答案: