【React全家桶入门之六】渲染用户列表

最新推荐文章于 2024-05-02 17:57:24 发布

一韬

最新推荐文章于 2024-05-02 17:57:24 发布

阅读量8k

点赞数

分类专栏： React全家桶入门 react React全家桶入门文章标签： react router

本文链接：https://blog.csdn.net/awaw00/article/details/54835573

版权

现在我们需要一个页面来展现数据库中记录的用户。

在/src/pages下新建UserList.js文件。

创建并导出UserList组件：

import React from 'react';

class UserList extends React.Component {

  render () {
    return (
      ...
    );
  }
}

export default UserList;

当页面加载的时候需要调用接口来获取用户列表，并把获取到的用户列表数据存放到组件的state中（this.state.userList）：

class UserList extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      userList: []
    };
  }

  componentWillMount () {
    fetch('http://localhost:3000/user')
      .then(res => res.json())
      .then(res => {
        this.setState({
          userList: res
        });
      });
  }

  render () { ... }
}

在render方法中，使用数组的map方法将用户数据渲染为一个表格：

class UserList extends React.Component {
  constructor (props) { ... }

  componentWillMount () { ... }

  render () {
    const {userList} = this.state;

    return (
      <div>
        <header>
          &l