Question

我的生活不能解决这个问题。每次调用setState（）时，该组件都应该重新渲染，对吧？我设置了一系列打印语句，因此我可以看到我的处理程序被触发但render（）不是。请帮我理解这里出了什么问题！

以下是我的代码的重要部分：

我的构造函数：

＆＃13;

  constructor(){
    super();
    this.state = {upvoted:false}
    this.handleFavorite = this.handleFavorite.bind(this);
  }

＆＃13;

我的经纪人：

＆＃13;

  handleFavorite(event){
    event.preventDefault();

    console.log("handleFavorite fired");

    var query=location.pathname;
    query = query.split('/');
    var username1=query[2];
    var playlist=query[3];

    var vote = this.props.data.vote;

    var self = this;

    if (username1) {
      request
        .post('/api/endpoint')
        .end(function(err, res) {
              self.setState({upVoted: true});
              self.forceUpdate();
              console.log("status "+res.body.status);
      });
    }

  }

＆＃13;

我的处理程序调用：

＆＃13;

render() {
  return (
    <div onClick={this.handleFavorite}>stuff</div>
  );
}

＆＃13;

Answer 1

setState应该为您触发render，无需拨打forceUpdate

另外，setState是异步的，因此forceUpdate会在state更新之前触发

Answer 2

我只是对不同的行为有同样的看法。我想你需要将函数的引用（handleFavorite）传递给onClick结帐这个答案：Why is my onClick being called on render? - React.js

无法让React组件重新渲染

2 个答案: