react-swipe API & Invariant Violation w/ ReactJS

Question

我收到了一个不变的违规错误。我正在尝试让 react-swipe 处理下一个/上一个 API 调用。

这与nextPanel()中的this.setState()有关，猜你不能在render()中调用setState。不知道如何解决这个问题？

顺便说一句 - 我对 react-swipe 的本地副本进行了更改，试图让 swipe.js API 为 slide() 工作。在此处查看我的更改：http://jsfiddle.net/0o1737ya/

主react-swipe页面：https://github.com/jed/react-swipe

另一个问题是为什么在我点击带有onClick() 事件的<div> 之前会调用nextPanel()？我添加了一堆console.log()'s 并注意到发生了这种情况。

var MyPrizesCarousel = React.createClass({
  getInitialState: function() {
    return {
      panelIdx: 0,
      isNext: false
    };
  },

    nextPanel: function(index) {
      newPanelIdx = this.state.panelIdx + 0;

      this.setState( {panelIdx: index} );
      this.setState( {isNext: true} );
    },

   render: function() {
      var swipeOptions = {
        continuous: false
      }

     this.carousel = (
          <Swipe continuous={false} panelIdx={this.state.panelIdx} isNext={this.state.isNext} >
            <div>
              <MyPrizesPane1 nextPanel={this.nextPanel} />
            </div>
            <div>
              <MyPrizeOne />
            </div>
            <div>
              <MyPrizeTwo />
            </div>
          </Swipe>
        );

      return (
         <div>
            <div>{this.carousel}</div>        
         </div>
      );
  } 
});


var MyPrizesPane1 = React.createClass({
  nextPanel: function(index) {
    this.props.nextPanel(index);
  },

   render: function() {
      return (
         <div>
            <div onClick={this.nextPanel(1)}>
              <img  className="menu-button" src="static/images/big-prize.gif" />
            </div>

            <div onClick={this.nextPanel(2)}>
              <img className="menu-button" src="static/images/grand-prize.jpg" />
            </div>           
         </div>
      );
  } 
}); 

注意：我从上面的代码中省略了一些 ReactJS 组件，因为它们很简单，不应该影响修复。

Answer 1

当你说

<div onClick={this.nextPanel(1)}>

您的意思是“获取this.nextPanel(1) 的返回值并将其分配给onClick。”那不是你想要的；相反，您想说“分配对this.nextPanel 的引用，第一个参数预先绑定到1 到onClick。”你可以这样编码：

<div onClick={this.nextPanel.bind(null, 1)}>