现在我们需要一个页面来展现数据库中记录的用户。
在 / 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 (
); } }
在 / src/index.js 文件中添加指向这个页面的路由,并在 / src/pages/Home.js 中加入相应的链接:
- // /src/index.jsimport UserListPage from './pages/UserList';ReactDOM.render(( ), document.getElementById('app'));
- // /src/pages/Home.jsclass Home extends React.Component { render () { return (
); } }
最后,我们可以在添加用户之后,使用 this.context.router.push 方法来跳转到用户列表页面:
- // /src/pages/UserAdd.jsclass UserAdd extends React.Component { handleSubmit (e) { ... fetch('http://localhost:3000/user', { ... }) .then((res) => res.json()) .then((res) => { if (res.id) { alert('添加用户成功'); this.context.router.push('/user/list'); return; } else { alert('添加失败'); } }) .catch((err) => console.error(err)); } render () { ... }}// 必须给UserAdd定义一个包含router属性的contextTypes// 使得组件中可以通过this.context.router来使用React Router提供的方法UserAdd.contextTypes = { router: React.PropTypes.object.isRequired};
这样我们在添加用户之后就可以立即在列表中看到最新添加的用户了:
就爱阅读 www.92to.com 网友整理上传, 为您提供最全的知识大全, 期待您的分享,转载请注明出处。
来源: