reactjs中重新渲染组件onClick

Question

我有一个组件，在该组件中定义了一个

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>
    );
};

Answer 1

您使用

this.forceUpdate()

是错误的：在您调用它时，后端信息尚未完成。像这样更改代码：

submitvote(vote_object, done) {
  // ... stuffs ...

  done()
}


handleClick(id) {
  // ... stuffs ...

  this.props.submitvote(vote_object, ()=>{
    this.forceUpdate()
  })
}

Answer 2

通过查看您的代码，我认为您不需要在这里使用forceUpdate。你需要的是一个回调函数，在里面你需要调用setState。这将重新渲染您的组件。

    this.props.submitvote(vote_object,this.successfunction);

您的 Submitvote() 方法应该类似于

    submitvote(vote_object, success) { 

  success()
}

在您的组件中包含以下成功方法。提交投票完成后调用成功函数。

    successfunction(){
      this.setState({yourState:value});
    }