单击 React-router 中的链接时组件获取错误的道具答案

【问题标题】：Components gets the wrong props when clicking links in React-router单击 React-router 中的链接时组件获取错误的道具
【发布时间】：2016-08-08 12:17:35
【问题描述】：

我正在开发一个简单的用户页面，每个用户都有自己的个人资料。个人资料页面在初始加载时工作。

但是，如果我当前正在查看 user1 的个人资料，然后单击链接将我带到 user2，个人资料页面仍将加载 user1 em> 因为this.props.params 还没有更新。如果我点击链接两次，user2 的个人资料就会出现。我需要帮助才能使其正常工作

在这里，代码胜于雄辩：

var { Router, Route, Redirect, IndexRoute, IndexLink, Link, hashHistory, browserHistory } = ReactRouter;
var browserHistory = ReactRouter.browserHistory;


var Profile = React.createClass({
    getInitialState: function() {
        return {
            userName: '',
            userId: '',
            displayName: ''
        };
    },
    setProfile: function() {
        $.post('/api/v1/rest/getUser', {username: this.props.params.name}, function (result) {
            if(!result.error) {
                this.setState({
                    userName: result.seo_name,
                    userId: result.member_id,
                    displayName: result.display_name
                });
            }
        }.bind(this));
    },
    componentDidMount: function() {
        this.setProfile();
    },
    componentWillReceiveProps: function() {
        this.setProfile();
    },
    render: function() {
        return (
            <div>
                {this.state.displayName}
            </div>
        );
    }
});

var MainLayout = React.createClass({
    render() {
        return (
            <div className="application">
                <header>
                    {this.props.children.props.route.title}
                </header>
                <nav>
                    <Link to="/profile/user1">User 1</Link>
                    <Link to="/profile/user2">User 2</Link>
                </nav>
                {this.props.children}
            </div>
        )
    }
});

ReactDOM.render((
    <Router history={ReactRouter.browserHistory}>
        <Route component={MainLayout}>
            <Route name="profile" path="/profile/:name" title={'Viewing profile'} component={Profile} />
        </Route>
    </Router>
), document.getElementById('application'));

如您所见，我正在使用 jquery 进行 ajax 调用，并且在 MainLayout 组件的导航中添加了两个测试链接。每次我去一个新的配置文件时，我都想重新运行 ajax 调用并立即获取新的配置文件信息。

另一个简短的问题：在 MainLayout 组件中，我使用 Route 元素 (this.props.children.props.route.title) 上定义的道具在页眉中打印页面标题。这当前显示“查看个人资料”。我想让它说“查看用户名的配置文件”，其中用户名是一个变量。我想不出一个干净的反应方式来做到这一点（在父组件的标题上附加一些东西）。

【问题讨论】：

标签： javascript jquery reactjs react-native react-router

【解决方案1】：

这里有两个建议：

将其命名为 getProfile 而不是 setProfile..
getProfile 函数应该接受一个参数，而不是依赖于上下文；）

解决方案：

componentWillReceiveProps 表示要设置新的道具..所以它们还没有设置。但是 nextProps 是可用的。

componentDidMount: function() {
  // use the name from props to get the profile
  this.getProfile(this.props.params.name)
}    

componentWillReceiveProps: function(nextProps) {
  // use the name from nextProps to get the profile
  this.getProfile(nextProps.params.name);
},

getProfile: function(name) {
    // ajax call, use the *name* param
}

关于标题的问题

有个叫Helmet的组件，专门用来改标题之类的东西

https://github.com/nfl/react-helmet

【讨论】：