[英]Components gets the wrong props when clicking links in React-router
I'm working on a simple User page where each user has their own profile. 我正在一个简单的用户页面上,每个用户都有自己的个人资料。 The profile page works on initial load.
配置文件页面在初始加载时起作用。
However, if I am currently viewing the profile of user1 then click a link to take me to user2 , the profile page will still load user1 because this.props.params
haven't updated yet. 但是,如果我当前正在查看user1的配置文件,然后单击链接将我带到user2 ,则配置文件页面仍将加载user1,因为
this.props.params
尚未更新。 If I click the link twice, then the profile of user2 will show up. 如果我单击链接两次,则将显示user2的配置文件。 I need help getting this to work correctly
我需要帮助以使其正常工作
Here, code speaks more than words: 在这里,代码比单词更能说明问题:
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'));
As you can see I'm using jquery for ajax calls, and I've added two links for testing in the nav of the MainLayout component. 如您所见,我正在使用jquery进行ajax调用,并且在MainLayout组件的导航栏中添加了两个测试链接。 Every time I go to a new profile, I want to re-run the ajax call and fetch new profile information instantly.
每次转到新的个人资料时,我都想重新运行ajax调用并立即获取新的个人资料信息。
Another short question: Inside the MainLayout component, I'm printing the title of the page in the header using props defined on the Route element ( this.props.children.props.route.title
). 另一个简短的问题:在MainLayout组件内,我正在使用Route元素(
this.props.children.props.route.title
)上定义的道具在页眉中打印页面标题。 This currently says "Viewing profile". 当前显示“正在查看个人资料”。 I want it to say "Viewing profile of Username", where Username is a variable.
我希望它说“查看用户名的配置文件”,其中用户名是一个变量。 I couldn't figure out a clean react way to do this (appending something to the title of a parent component).
我想不出一个干净的反应方式来做到这一点(在父组件的标题后面添加一些内容)。
here two suggestions: 这里有两个建议:
Solution: 解:
componentWillReceiveProps means new props are going to be set.. so they are not set yet. componentWillReceiveProps意味着将要设置新的道具。因此尚未设置。 However nextProps are available.
但是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
}
There is a component called Helmet, its specially to change those things like title 有一个名为Helmet的组件,它专门用于更改标题等内容
https://github.com/nfl/react-helmet https://github.com/nfl/react-helmet
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.