Komponenten erhalten die falschen Requisiten beim Klicken auf Links in React-Router

Question

Ich arbeite auf einer einfachen User-Seite, wo jeder Benutzer sein eigenes Profil hat. Die Profilseite funktioniert beim erstmaligen Laden.

Allerdings, wenn ich zur Zeit bin die Anzeige klicken Sie auf das Profil von benutzer1 dann einen Link zu mir nehmen zu benutzer2, wird die Profilseite noch benutzer1 weil this.props.params nicht aktualisiert noch laden. Wenn ich zweimal auf den Link klicke, wird das Profil user2 angezeigt. Ich brauche Hilfe dieses richtig

Hier arbeiten immer, spricht Code mehr als Worte:

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')); 

Wie Sie sehen, ich bin mit jquery für Ajax-Aufrufe, und ich habe für den Test zwei Links hinzugefügt das Nav der MainLayout-Komponente. Jedes Mal, wenn ich zu einem neuen Profil gehe, möchte ich den Ajax-Anruf erneut ausführen und neue Profilinformationen sofort abrufen.

Eine weitere kurze Frage: In der Komponente MainLayout drucke ich den Titel der Seite in der Kopfzeile mit Requisiten auf dem Element Route (this.props.children.props.route.title) definiert. Dies sagt derzeit "Profil anzeigen". Ich möchte, dass "Profil von Benutzername anzeigen" angezeigt wird, wobei Benutzername eine Variable ist. Ich konnte keinen sauberen Weg finden, dies zu tun (etwas an den Titel einer Elternkomponente anhängen).

Answer 1

hier zwei Vorschläge:

1. Name es GetProfile statt setProfile ..
2. GetProfile Funktion ein param nehmen sollte, und nicht auf den Kontext verlassen;)

Lösung:

componentWillR eceiveProps bedeutet, dass neue Requisiten gesetzt werden .. also sind sie noch nicht gesetzt. Jedoch sind nextProps verfügbar.

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 
} 

2. Frage über den Titel

Es ist eine Komponente namens Helm, seine speziell jene Dinge wie Titel ändern

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