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

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

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

我正在使用react路由器，因此当我选择一个便笺时，它会根据所选便笺遍历到/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;

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({
混合：[状态]，
getInitialState:函数（）{
返回{
注意：NoteStore.getNote（），
错误：[]
};
},
componentDidMount:function（）{
NoteStore.addChangeListener（this.\u onChange）；
NoteActionCreators.loadNote（this.getParams（）.noteId）；
},
componentWillUnmount:function（）{
NoteStore.removeChangeListener（this.\u onChange）；
},
_onChange:function（）{
这是我的国家({
注意：NoteStore.getNote（），
错误：NoteStore.getErrors（）
});
},
render:function（）{
返回(
{this.state.note.title}
{this.state.note.body}
);
}
});
module.exports=注释项；

下面是我如何使用react router从侧边栏链接到NoteItem：

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

{this.props.note.title}

我的路线是：

<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>

任何帮助都将不胜感激

---

谢谢

您需要实现，因为其他的livecycle方法没有被调用

太好了……这正是我想要的。谢谢！：）