反应路由器链接，在地图功能内，仅工作一次

Question

I'have followed this react router example , but when I click a second time on another user, it seems that the User component state still unchanged. So, I can see just one user.

package.json

 {
  "name": "raspberry",
  "version": "1.0.0",
  "description": "raspberry =========",
  "main": "index.js",
  "scripts": {
    "start": "node webpack.dev-server.js",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^0.14.7",
    "react-bootstrap": "^0.30.7",
    "react-dom": "^0.14.7",
    "react-router": "^2.0.0",
    "superagent":"^3.3.2"
  },
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "bootstrap-sass": "^3.3.7",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "node-sass": "^4.3.0",
    "react-bootstrap": "^0.30.7",
    "react-hot-loader": "^1.3.0",
    "sass-loader": "^4.1.1",
    "style-loader": "^0.13.1",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
  }
}

app.js

ReactDom.render((
    <Router history={hashHistory}>
        <Route path="/" component={Layout}>
            <IndexRoute component={Home} />
            <Route path="/home" component={Home}/>
            <Route path="/users" component={Users}>
                <Route path="/users/:userId" component={User}/>
            </Route>
            <Route path="*" component={NoMatch} />    
        </Route>
    </Router>
), document.getElementById('app'));

Users.js

const Users = React.createClass({
    getUsers: function() {
        var self = this;
        request
            .get('/api/users')
            .set('Auth', 'Bearer '+ this.state.token)
            .end(function(err, res){
                if (res.statusCode === 200){
                    self.setState({
                        users:JSON.parse(res.text)
                    }) ;

                }else{
                    console.log('Get Users failed');
                }

        });

    },
    getInitialState: function(props) {
        props = props || this.props;
        return {
            token : localStorage.getItem("token"),
            users:[]

        };
    },
    componentDidMount: function() {
        this.getUsers();
    },
    render: function() {
        return(
            <div>
                <h1>Users</h1>
                <div className="master">
                  <div className="list-group">
                    {this.state.users.map(user => (
                      <Link to={`/users/${user.id}`} key={user.id} className="list-group-item">{user.username}</Link>
                    ))}
                  </div>
                </div>
                <div className="detail">
                  { this.props.children }
                </div>
              </div>
        );
    }
});

export default Users;

User.js

const User = React.createClass({
    findUserById: function(id){
        var self = this;
        request
            .get('/api/users/'+id)
            .set('Auth', 'Bearer '+ localStorage.getItem("token"))
            .end(function(err, res){
              console.log(res);
                if (res.statusCode === 200){
                    self.setState({
                        user:JSON.parse(res.text)
                    }) ;

                }else{
                    console.log('Get User failed');
                }

        });
    },
    getInitialState: function() {
        return {user:''};
    },       
    componentDidMount: function() {
        console.log('componentDidMount');
        this.findUserById(this.props.params.userId)
    },

  render:function() {
    return (
      <div>
        <h2>{this.state.user.username}</h2>
      </div>
    )
  }
});
export default User;

Answer 1

If you are at the location /users/17 , you will be rendering the components <Layout> , <Users> , and <User> . If you then navigate to the location /users/5 , you will still be rendering the same components. That means that in order for <User> to render based on the new params , you need to implement a componentWillReceiveProps or componentDidUpdate method on that component.

Answer 2

How to actually implement componentWillReceiveProps or componentDidUpdate method on that component? What to do when using react hooks?