Question

我有三个组件来添加/查看和列出用户。所有这些都是基于componentDidMount属性从主容器的render()和this.props.match.path方法调用的。请在下面找到容器代码：

import React, { Component } from 'react';
import { UsersList, ViewUser, AddUser } from '../components';
import { getUsers, getUserDetails } from '../actions';

class Users extends Component {

    componentDidMount() {
        switch (this.props.match.path) {
            case '/users/:id':
                this.props.getUserDetails(this.props.match.params.id);
                break;
            case '/users/add':
                break;
            case '/users':
                this.props.getUsers();
                break;
        }
    }


    render() {
        return (
            <div>
                {
                    this.props.match.path === '/users/add' ? <AddUser onSubmit={this.submit} /> :
                        this.props.match.path === '/users/:id' ? <ViewUser user={this.props.user} /> :
                            <UsersList users={this.props.users} />
                }
            </div>
        )
    }
}

路由器文件中的代码如下：

import React from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import { Menu, MenuItem } from '@progress/kendo-layout-react-wrapper';
import { Switch } from 'react-router-dom';

export default () => (
    <BrowserRouter>
        <div>
            <div className="col-xs-12 col-sm-6 col-md-12">
                <header className="App-header">
                    <h1 className="App-title">TestUsers</h1>
                </header>
                <Menu>
                    <MenuItem>
                        <Link to="/users">Users</Link>
                    </MenuItem>
                    <MenuItem>
                        Shelves
                        </MenuItem>
                    <MenuItem>
                        Products
                    </MenuItem>
                </Menu>
            </div>
            <Switch>
                <Route exact path="/users" component={Users} />
                <Route exact path="/users/add" component={Users} />
                <Route exact path="/users/:id" component={Users} />
            </Switch>
        </div>
    </BrowserRouter>
)

当我去addUser组件并单击User's菜单以加载所有用户的列表时，组件被正确呈现。但是没有调用ComponentDidMount方法，其中存在从db检索用户的代码。因此网格是空的。任何人都可以让我知道，在这种情况下理想情况下应该做些什么？基本上我想在返回/ users url后加载用户列表。

由于

Answer 1

尝试使用componentWillReceiveProps。

Reactjs：使用Link to =“”

1 个答案: