我之前从未有过这个,我只能假设它找不到它试图渲染的div
元素?哪个没有意义,因为当我console.log
在事件触发之前和之后有问题的元素存在时,它就会存在,但错误被抛出....
以下是一个骨干视图 - 渲染一个reactjs组件,我们传入deleteEvent: this.handleDeleteEvent.bind(this)
,它允许我们连续点击删除,它会在事件中冒泡并走过,基本上是重新调用集合和重新渲染组件。
但导致问题的React.renderComponent()
是:
AisisWriter.Views.PostIndex = AisisWriter.Views.CoreView.extend({
writer_posts: new AisisWriter.Collections.Posts(),
handleDeleteEvent: function(id){
var toDelete = new AisisWriter.Models.Post();
toDelete.set({id: id});
toDelete.destroy().then(this.deleted(id), this.failedToDelete);
return false
},
deleted: function(id) {
var options = { reset: true };
this.writer_posts.fetch(options).then(this.postsRecieved.bind(this), this.serverError);
},
postsRecieved: function(collection, response, options) {
this.render(collection);
if ($('#flash-error').is(':visible')){
$('#flash-error').hide();
}
$('#flash-success').show();
},
serverError: function() {
if ($('#flash-success').is(':visible')){
$('#flash-success').hide();
}
$('#flash-error').show();
},
failedToDelete: function() {
if ($('#flash-success').is(':visible')){
$('#flash-success').hide();
}
$('#flash-error').show();
},
render: function(postsObject) {
element = this.getElement();
var totalPerPage = postsObject.total_pages.total;
var posts = postsObject.posts;
React.renderComponent(new PostTable({posts: posts, maxPages: totalPerPage, deleteEvent: this.handleDeleteEvent.bind(this)}), element);
}
});
第一次渲染 - 非常棒。你看到一个带有帖子的表,然后你点击它删除它一直到 - 从模型中删除它,回忆集合一直渲染。从那里它获得总页数,帖子然后将它们传递给组件,在那个阶段我得到:
Uncaught TypeError: Cannot read property 'parentNode' of undefined
有人有任何想法吗?
答案 0 :(得分:6)
在PostTable组件中,您是否明确呈现<tbody>
元素?某些浏览器会在初始渲染后自动添加一个,这可能会导致此问题。明确地渲染<tbody>
应该可以解决问题。