【react】map 遍历json数据

来源:互联网 发布:阿里云 安骑士 编辑:程序博客网 时间:2024/06/05 04:58

数据格式:(此数据写在了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值必须要连续,否则会报错
这里写图片描述