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

最新推荐文章于 2025-05-06 20:26:37 发布

原创

最新推荐文章于 2025-05-06 20:26:37 发布 · 8.2k 阅读

标签

#react #router

本文介绍如何在React应用中实现用户列表的渲染。通过创建UserList组件，从API获取用户数据并存储在状态中，使用map方法动态渲染表格。同时，结合react-router进行页面路由设置，确保添加用户后能无缝跳转到用户列表页面，实时展示新增用户。

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

在/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>
          <

最低0.47元/天解锁文章

11 条评论

栗子萌萌哒 2018.12.25
为什么跳转不过呢？？[code=javascript] this.context.router.history.push('/user/list') [/code]
- 栗子萌萌哒回复栗子萌萌哒 2018.12.25
  [reply]nannanmengmengda[/reply] 解决了，漏掉了res=>res.json

yingga33 2018.09.29
从第三章开始总是报错这个：index.js:2177 =》Warning: Failed propType: Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them.装了一个"prop-types": "^15.6.2",和一个"react-prop-types": "^0.4.0",仍然报错，还多了一个 webpackHotDevClient.js:154 =>>.\src\pages\UserAdd.js Line 124: React.PropTypes is deprecated since React 15.5.0, use the npm module prop-types instead react/no-deprecated;
- yingga33回复yingga33 2018.09.30
  [reply]yingga33[/reply] [code=html]Warning: Failed Context Types: Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types Check the render method of `Home`. [/code] 求解决···
- yingga33回复yingga33 2018.09.29
  [reply]yingga33[/reply] 另外这里渲染用户列表，即添加用户成功后不能自动跳转到列表页，会报错：Cannot read property 'push' of undefined，求楼主和各位大神指教！（用的本文章引用的router3.0.0版本）

Code丶橙子 2018.05.17
router 4.2 [code=javascript] this.context.router.history.push('/user/list'); [/code]

noWayBinding 2017.12.03
```this.props.history.push('/user');``` 跳转直接搞定,router4.0
- qq_38977654回复noWayBinding 2017.12.31
  [reply]qq381332153[/reply] 谢谢

clariones 2017.09.28
to：遇到本章问题的所有伙伴，由于React版本升级，按照文章编辑UserAdd.js后，出现如下错误 ----------------- TypeError: Cannot read property 'object' of undefined ./src/pages/UserAdd.js src/pages/UserAdd.js:83 80 | } 81 | 82 | UserAdd.contextTypes = { > 83 | router: React.PropTypes.object.isRequired 84 | }; 85 | 86 | UserAdd = formProvider({ --------------------------------- 解决办法： 1. 安装prop-types： npm i react-prop-types 2. 在文件中引入： import PropTypes from 'prop-types'; 3. 修改声明方式： UserAdd.contextTypes = { router: PropTypes.object.isRequired }; 希望能和大家一起学习进步。感谢楼主的分享。
- vince_Da回复clariones 2017.12.11
  [reply]clariones[/reply] 给个赞多谢帮忙！
- noWayBinding回复clariones 2017.12.03
  [reply]clariones[/reply] 文章过时了，router4.0时代变了。添加完跳转直接：```this.props.history.push('/user');```搞定

qq326688829 2017.07.13
楼主路由更新了，最新的4.X 已经和之前的写法不同了很不错的博客，没用过fetch和这个建议数据库很好很强大
- qq_38977654回复qq326688829 2017.12.31
  [reply]qq326688829[/reply] Server中db.json的数据结构,前面的练习,会导致存在新结构的数据,删掉就好了

qq326688829 2017.07.13
楼主路由更新了，最新的4.X 已经和之前的写法不同了很不错的博客，没用过fetch和这个建议数据库很好很强大

qq_34334903 2017.06.30
UserAdd.js?285b:41 TypeError: Cannot read property 'push' of undefined at eval (eval at <anonymous> (index.js:2508), <anonymous>:77:42) at <anonymous> 不能跳转，请问博主啥情况
- lynnhgwang回复qq_34334903 2017.11.24
  [reply]qq_34334903[/reply] 因为当前this（即UserAdd组件）里面的context没有东西，把this.context.router.push('/user/list'); 换成this.props.history.push({ pathname: '/user/list'});就可以了

yisse 2017.04.19
[code=javascript] Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead. [/code] 能够运行出来但是出上面的错误提示，是什么意思？？

AC_小哥 2017.03.20
博主好，我在编写完UserList的代码后查看网页报了一个错误， UserList.js:2 Uncaught TypeError: Super expression must either be null or a function, not undefined不知道是什么意思，按照网上的解释把react的版本调至0.13.3也不管用
- 一韬回复AC_小哥 2017.03.20
  [reply]u010703252[/reply] import React from 'react'; class UserList extends React.Component { 这两句有没有拼写问题？
- AC_小哥回复一韬 2017.03.20
  [reply]awaw00[/reply] 是对的
- 一韬回复AC_小哥 2017.03.20
  [reply]u010703252[/reply] constructor (props) { super(props); this.state = { userList: [] }; } UserList里的构造方法写对了嘛？