使用react-router选择新项时刷新组件
Refresh component when new item selected using react-router
我试图通过创建一个笔记web应用程序来测试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;
下面是我如何使用react-router从我的侧边栏链接到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>
如有任何帮助,不胜感激。
谢谢!
您需要实现componentWillReceiveProps,因为当动态段更改时,其他活周期方法不会被调用
相关文章:
- 强制模板刷新ember.js
- React重新渲染但未显示正确的组件
- 不能从angular2中的子组件指定父组件中的数组
- 如何通过ajax刷新JSF填充的javascript变量
- OnsenUI、Angular和在警报对话框后刷新UI组件
- Sencha Touch:如何在setData()之后刷新组件的数据
- 如何刷新'选项'ko多选组件中的绑定
- 刷新子组件更改时的应用状态
- 检票口 - 使用 AJAX 刷新组件 - 文档元素后的垃圾
- 刷新附加组件 SDK 中的内容网址
- 不要在新页面加载或刷新时渲染React组件
- Tacos AjaxEventSubmit没有't在刷新后为Tapestry Palette组件附加必要的jav
- 如何从JavaScript刷新PrimeFaces编辑器组件
- 用angular 1.5的组件路由处理浏览器刷新事件
- 使用ES6构造函数渲染React组件的刷新页面会破坏应用程序
- 错误“无法获取”;Redux组件刷新后在浏览器中的url
- 我的ReactMeteor照片组件在窗体内刷新页面
- 组件获取重复的内容,而不是刷新
- 在运行时添加ExtJS组件-“刷新视图”
- 使用react-router选择新项时刷新组件