Javascript 交换React.js中的元素并获取<；错误>；

所以我有一副学习卡，上面有一个链接可以开始学习。用户完成学习会话后，我不希望用户在两分钟内访问学习会话链接。我没有使用链接，而是使用timeLeft状态使用计时器从2分钟倒计时到0分钟。2分钟后，计时器消失，并通过在componentDidUpdate中将状态设置为“link”来替换为研究会话的链接。一切都按预期工作，除了react会减慢deck页面的呈现速度。我的代码如下：

/** @jsx React.DOM */
var cardModel = require("../models/card.js");
var Card = React.createFactory(require("./card.jsx"));
//var BackboneMixin = require("../../BackboneMixin.js");

var DeckShow = React.createClass({
  //mixins: [BackboneMixin],
  getInitialState: function() {
    return {elapsedTime: this.setTime(), timeLeft: 0, cards: this.props.cards, cardsCollection: [], cardShow: "question", empty: "none" }
  },

  componentDidMount: function () {
    this.props.cardCollection.fetch();
    var boxes = this.getBoxState(this.props.deck)
    this.setState({timeLeft: this.props.delay - this.state.elapsedTime})
    this.interval = setInterval(this.countDown, 1000)
    var startBox = [];
    var i = 0;
    while (i <= (this.props.deck.get("session_num") % 5)) {
      startBox.concat(boxes[i])
      i += 1;
    }

    if ((this.props.deck.get("cards").length > 0) && (this.state.elapsedTime >= this.props.delay || this.props.deck.get("last_session") === null)) {
      this.setState({empty: "link"});
    } else if (this.props.deck.get("cards").length > 0 && startBox.length === 0) {
      this.setState({empty: "timer"})
      //setTimeout(this.setState({empty: "link"}), this.state.timeLeft)
    }
    else{
      this.setState({empty: "none"});
    }
  },

  componentDidUpdate: function(nextProps, nextState) {
    this.props.deck.on("sync", function(){
      this.forceUpdate();
    }, this)

    if (this.state.timeLeft <= 0) {
      clearInterval(this.interval)
      this.setState({empty: "link"})
      this.forceUpdate();
    }
  },

  componentWillUpdate: function(){
  //      var that = this;
  //      if (this.state.elapsedTime <= 0) {
  //          that.setState({empty: that.link})
  //      }
  },

  componentWillUnmount: function(){
    clearInterval(this.interval);
  },

  setTime: function(){
    var last = this.props.deck.get("last_session") || Date.now();
    return Date.now() - last;
  },

  getBoxState: function(deck) {
    var boxState = [[],[],[],[],[]]
    var deckCards = deck.get("cards");
    for (var i = 0; i < deckCards.length; i++) {
      boxState[deckCards[i].box_id].push(deckCards[i])
    }

    return boxState;
  },

  countDown: function() {
    this.setState({timeLeft: this.state.timeLeft - 1000})
  },

  handleSubmit: function(event) {
    event.preventDefault();
    var question = this.refs.question.getDOMNode().value.trim();
    var answer = this.refs.answer.getDOMNode().value.trim();
    if ((!question) || (!answer)) {
      return;
    } 

    this.refs.question.getDOMNode().value = '';
    this.refs.answer.getDOMNode().value = '';
    var cards = this.props.cardCollection.models[0].get("objects")

    var newCard = {
      question: question,
      answer: answer,
      deck_id: this.props.id,
      box_id: 0
    }

    this.props.cardCollection.create(newCard, {wait: true})
    var cardArr = this.state.cards
    cardArr.push(newCard)
    this.setState({empty: "link"});
    this.setState({cards: cardArr})
    return;
  },

  render: function() {
    var header = "Deck: " + this.props.deck.get("name");

    var cardsList = this.props.cards.map(function(card) {
      return <Card box={card.box_id}
            key={card.id}
            cardQuestion={card.question}
            cardAnswer={card.answer}
            text={card.answer} />
    });

    var view;
    var empty = this.state.empty;
    var that = this;

    var elapsed = this.state.timeLeft;
    var none = <p>{"There are no cards"}</p>
    var timer = <p>{"Time till next: " + Math.floor(elapsed/60000) + ":" + Math.floor((elapsed % 60000)/1000)}</p>
    var link = <a href={"#/decks/" + this.props.id + "/study"}>{"Study Mode"}</a>

    if (this.state.empty === "link") {
      view = link;
    } else if (this.state.empty === "timer") {
      view = timer;
    } else {
      view = none;
    }

    return (
      <div className="cardList">
        <h2>{header}</h2>
        <div id="study-mode">
          {view}
        </div>
        <ul id="deck-index">{cardsList}</ul>
        <div className="input">
          <form onSubmit={this.handleSubmit} className="form-horizontal">
            <div className="form-group">
              <input
                type="text"
                ref="question"
                placeholder="Add a new question" />
              <br />
              <input
                type="textarea"
                ref="answer"
                placeholder="Add an answer" />
              <br />
              <input type="submit" value="Add Card" />
            </div>
          </form>
        </div>
      </div>
    );
  }
});

module.exports = DeckShow;

/**@jsx React.DOM*/
var cardModel=require（“../models/card.js”）；
var Card=React.createFactory（需要（“./Card.jsx”）；
//var BackboneMixin=require（“../../BackboneMixin.js”）；
var DeckShow=React.createClass({
//mixin:[BackboneMixin]，
getInitialState:函数（）{
return{elapsedTime:this.setTime（），timeLeft:0，cards:this.props.cards，cardsCollection:[]，cardsShow:“问题”，空：“无”}
},
componentDidMount:函数（）{
this.props.cardCollection.fetch（）；
var-box=this.getBoxState（this.props.deck）
this.setState（{timeLeft:this.props.delay-this.state.elapsedTime}）
this.interval=setInterval（this.countDown，1000）
var startBox=[]；
var i=0；
而（i 0）和（this.state.elapsedTime>=this.props.delay | | | this.props.deck.get（“上次会话”）==null））{
this.setState（{empty:“link”}）；
}else if（this.props.deck.get（“cards”）.length>0&&startBox.length==0）{
this.setState（{empty:“timer”}）
//setTimeout（this.setState（{empty:“link”}），this.state.timeLeft）
}
否则{
this.setState（{empty:“none”}）；
}
},
componentDidUpdate:函数（nextProps，nextState）{
this.props.deck.on（“sync”，function（））{
这个.forceUpdate（）；
}，本页）
如果（this.state.timeLeft调用
this.forceUpdate（）
在
componentdiddupdate
内部导致代码中无限递归。每当组件的属性或状态更改时以及
forceUpdate（）时，都会调用
componentdiddupdate
update方法调用了
。因此您将得到componentDidUpdate->forceUpdate->componentDidUpdate->forceUpdate->……[无限递归]

要解决此问题，请执行以下操作：

将
this.props.deck
订阅从
componentDidUpdate
移动到
componentDidMount
。该订阅只需在安装组件时添加，而不是每次更新任何内容时添加
从
componentDidUpdate