我有一个组件,在该组件中定义了一个
onClick
方法。在该方法上,我正在调用后端并得到一些响应。仅在刷新浏览器后才设置从后端调用获取的值。有没有办法通过刷新浏览器来重新渲染我的组件?
我使用了反应文档中的
this.forceUpdate()
,但无法实现我所需要的。如何在不刷新浏览器的情况下仅重新渲染我的组件?
我的代码。
handleClick(id) {
this.setState({
vote_status: !this.state.vote_status,
})
let vote_object = {
voting_object: id,
post_id: this.props.postId
}
this.props.submitvote(vote_object)
//this.forceUpdate()
}
render() {
console.log("getVoteStatus", this.props.getVoteStatus)
let {contents, submitvote, postId, voted_id} = this.props
return (
<div className="txt_vote_bar_div" style={{
color: voted_id === contents.post_poll_content_id ? 'white' : '#9da0a4',
backgroundColor: this.state.vote_status ? '#0b97c4' : '#FFFFFF'
}} id={contents.post_poll_content_id}>
<p className="txt_vote_choice"
style={{color: this.state.vote_status || voted_id === contents.post_poll_content_id ? '#FFFFFF' : '#6a6a6a'}}
id={"id" + contents.post_poll_content_id}
onClick={() => {
this.handleClick(contents.post_poll_content_id);
}}> {contents.content} </p>
<p className="txt_tot_votes"
style={{color: this.state.vote_status || voted_id === contents.post_poll_content_id ? '#FFFFFF' : '#6a6a6a'}}> {contents.votes}%
(Votes:)</p>
</div>
);
};
您使用
this.forceUpdate()
是错误的:在您调用它时,后端信息尚未完成。像这样更改代码:
submitvote(vote_object, done) {
// ... stuffs ...
done()
}
handleClick(id) {
// ... stuffs ...
this.props.submitvote(vote_object, ()=>{
this.forceUpdate()
})
}
通过查看您的代码,我认为您不需要在这里使用forceUpdate。你需要的是一个回调函数,在里面你需要调用setState。这将重新渲染您的组件。
this.props.submitvote(vote_object,this.successfunction);
您的 Submitvote() 方法应该类似于
submitvote(vote_object, success) {
success()
}
在您的组件中包含以下成功方法。提交投票完成后调用成功函数。
successfunction(){
this.setState({yourState:value});
}