当使用react-router选择新项目时刷新组件

Question

我试图通过创建Notes webapp来测试React功能。在左侧边栏中，我列出了当前登录用户的所有注释。当选择其中一个笔记时，我希望它出现在网页的主要区域。

这是我第一次选择笔记，但不是在此之后，除非我手动刷新页面。我认为组件第一次挂载并检索注释，但是当我选择另一个注释时，它并未更新组件。

我正在使用react-router，因此当我选择一个笔记时，它会根据所选笔记遍历到/ notes /：note_id。这总是改变，但内容不刷新。

这里是我的NoteItem代码：

var React = require('react'); 
var WebAPIUtils = require('../../utils/WebAPIUtils.js'); 
var NoteStore = require('../../stores/NoteStore.react.jsx'); 
var NoteActionCreators = require('../../actions/NoteActionCreators.react.jsx'); 
var Router = require('react-router'); 
var State = require('react-router').State; 

var NoteItem = React.createClass({ 
    mixins: [ State ], 

    getInitialState: function() { 
    return { 
     note: NoteStore.getNote(), 
     errors: [] 
    }; 
    }, 

    componentDidMount: function() { 
    NoteStore.addChangeListener(this._onChange); 
    NoteActionCreators.loadNote(this.getParams().noteId); 
    }, 

    componentWillUnmount: function() { 
    NoteStore.removeChangeListener(this._onChange); 
    }, 

    _onChange: function() { 
    this.setState({ 
     note: NoteStore.getNote(), 
     errors: NoteStore.getErrors() 
    }); 
    }, 

    render: function() { 
    return (
     <div className="row"> 
     <div className="note-title">{this.state.note.title}</div> 
     <div className="note-body">{this.state.note.body}</div> 
     </div> 
    ); 
    } 
}); 

module.exports = NoteItem; 

而以下是我从我的侧边栏使用链接到NoteItem反应路由器：

<Link to="note" params={ {noteId: this.props.note.id} }>{this.props.note.title}</Link> 

我的路线：

<Route name="app" path="/" handler={NotesApp}> 
    <DefaultRoute /> 
    <Route name="login" path="/login" handler={LoginPage}/> 
    <Route name="signup" path="/signup" handler={SignupPage}/> 
    <Route name="notes" path="/notes" handler={NotesSidebar}/> 
    <Route name="note" path="/notes/:noteId" handler={NoteItem} /> 
<Route> 

任何帮助，将不胜感激。

谢谢！

Answer 1

您需要实现componentWillReceiveProps，因为其他的LiveCycle方法不叫when dynamic segments change