1. 程式人生 > >【react】map 遍歷json資料

【react】map 遍歷json資料

資料格式:(此資料寫在了getInitialState方法中)

list: [{
     'id':'1',
     'title':'123',
     'time':'2017',
     'person':'cheny0815',
     'type':'type',
     'operation':'operation'
   },{
     'id':'2',
     'title':'456',
     'time':'2017',
     'person':'cheny0815',
     'type':'type',
     'operation':'operation'
},{ 'id':'3', 'title':'789', 'time':'2017', 'person':'cheny0815', 'type':'type', 'operation':'operation' }]

頁面中遍歷方法(此處用this.state.list便可以取到值)

<table>
    <tbody>
        <tr className="first_tr">
          <td>內容</td>
          <td
>
發起人</td> <td>型別</td> <td>時間</td> <td>操作</td> </tr> { this.state.list.map(function(name){ return ( <tr key={name.id}> <td>{name.title}</td
>
<td>{name.person}</td> <td>{name.type}</td> <td>{name.time}</td> <td>{name.operation}</td> </tr> ) }) } </tbody> </table>

使用map遍歷時,需要給子元素新增一個key,作為唯一的標識,而且key值必須要連續,否則會報錯
這裡寫圖片描述