[英]React DOM not re-rendering/updating after state change
当前状态对象是这样的:
this.state = {
loadedPostList: [],
top: 0,
end: 0,
thresh: 20,
page: 0,
loadingPostList: false,
filter: [],
lazying: false
};
我正在利用一些反应生命周期方法来控制我的 redux 存储更新和数据流:
shouldComponentUpdate(nextProps, nextState) {
return this.props.posts.loadedPosts !== nextProps.posts.loadedPosts || this.state.loadedPostList !== nextState.loadedPostList;
}
componentDidUpdate(prevProps) {
let { loadedPosts, changeEvent, updatedId, deleteId } = this.props.posts;
if(prevProps.posts.loadedPosts !== loadedPosts) {
switch(changeEvent) {
case 'insert':
if(this.state.top === 0) {
this.refreshList();
}
console.log('new post in thread...');
break;
case 'update':
this.refreshList();
console.log('post updated in thread...');
break;
case 'delete':
this.refreshList();
console.log('post deleted in thread...');
break;
default:
break;
}
}
}
refreshList = () => {
let newList = this.props.posts.loadedPosts.slice(this.state.top, this.state.end);
this.setState({
loadedPostList: [...newList]
}, () => {
console.log('refreshed post list')
})
}
在渲染函数中,我将 this.state.loadedPostList 的元素映射到 PostList 组件。 问题是,当我的 redux 存储更新,随后我的 this.state.loadedPostList 更新时,重新渲染中的映射不会更新以显示更新的数组。 登录控制台并通过 redux 开发工具观察 redux 操作和存储表明数组确实在正确更新,并且我们的 refreshList() 等函数正在正常工作。 然而,问题仍然是 DOM 没有根据状态变化重新渲染/更新。 渲染函数:
render() {
return (
<div id="question-list-wrapper">
{
this.state.loadingPostList || this.state.lazying ?
<MiniViewLoader textToRender="Loading questions..."/>
:
<div id="question-list-inner-wrapper">
<div id="question-list-inner-wrapper-nav">
<h1 className="text" id='inner-wrapper-nav-header'> Recent Questions </h1>
</div>
{
this.state.loadedPostList.length < 1 ? <h1 className="no-questions-text">No questions availabe</h1> : ""
}
{
this.state.loadedPostList.map((post, index) => {
return (
<PostSlot idx={index} key={index+""} postData={post}/>
)
})
}
<div id="question-list-write-btn" alt="Ask Question">
<span>Ask Question</span>
<WritePostButton />
</div>
</div>
}
</div>
)
}
(编辑)如果有帮助,请提供更多信息。 有问题的组件由另一个组件的 render() 函数内的反应路由器 Switch 包装器呈现。
其他组件:
render() {
return(
<div className="page-wrapper">
{
this.state.settingUp ?
<FullPageLoaderWithText textToRender="Setting things up for you..."/>
:
<div id="main-hoc-wrapper-inner-wrapper">
<div id="main-hoc-nav-bar" className="item-a">
<span id="main-hoc-nav-logo" className="main-hoc-nav-elem">
PA
</span>
<span id="main-hoc-nav-search" className="main-hoc-nav-elem">
<input type="text" placeholder="Search..." className="placeholderEdit"/>
</span>
</div>
<div id="main-hoc-sidebar" className="item-c">
<span className="main-hoc-sidebar-tabs">{this.props.user.data}</span>
<span className="main-hoc-sidebar-tabs">tags</span>
<span className="main-hoc-sidebar-tabs">community</span>
<span className="main-hoc-sidebar-tabs">opportunities</span>
</div>
<div id="main-hoc-main-view" className="item-b">
<Switch>
{/* <Route path="/:param1/:param2/path" component={QuestionList} /> */}
<Route path="/:param1/:param2/path" render={() => <QuestionList connect={socket}/>} />
</Switch>
</div>
<div id="main-hoc-right-bar" className="item-d">
Blog posts & ads
</div>
</div>
}
</div>
)
}
我认为问题在于您的if
条件,您无法将两个数组与!==
进行比较。
例子:
var t = [1,2,3];
var f = [1,2,3];
if (t !== f) {
console.log("different");
} else {
console.log("same");
}
// by your logic the output should be "same"
// but it will not be
// because internally they both are object and we cannot compare
// two objects using `===` operator.
// you will have to loop through and check for difference
// or better let REACT HANDLE SUCH THINGS
问题出在这一行
let newList = this.props.posts.loadedPosts.slice(this.state.top, this.state.end);
,
this.state.top
和this.state.end
都是 0,所以它总是返回一个空数组,确保每次刷新后更新 top 和 end。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.