在React.js中交换元素并获取<error>

Question

所以我有一副学习卡，并有一个链接开始学习会议。用户完成学习会话后，我不希望用户访问学习会话链接两分钟。而不是链接我使用timeLeft状态将计时器从2分钟倒计时到0。 2分钟后，计时器消失，并通过将状态设置为＆＃34;链接＆＃34;来替换为研究会话的链接。在componentDidUpdate中。一切都按预期工作，除了反应减慢了甲板页面的渲染。我的代码如下：

/** @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;

错误跟踪如下：

  

ReactElement   @ react.js：9890ReactElement.createElement @ react.js：9972ReactClass.createClass.render @ react.js：8288ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext @ react.js：6925ReactCompositeComponentMixin._renderValidatedComponent @ react.js：6951ReactPerf.measure.wrapper @ react.js：13371ReactCompositeComponentMixin ._updateRenderedComponent @ react.js：6882ReactCompositeComponentMixin._performComponentUpdate @ react.js：6863ReactCompositeComponentMixin.updateComponent @ react.js：6783ReactPerf.measure.wrapper @ react.js：13371ReactCompositeComponentMixin.receiveComponent @ react.js：6647ReactReconciler.receiveComponent @ react.js：14131ReactChildReconciler .updateChildren @ react.js：4779ReactMultiChild.Mixin._updateChildren @ react.js：12900ReactMultiChild.Mixin.updateChildren @ react.js：12874ReactDOMComponent.Mixin._updateDOMChildren @ react.js：7862ReactDOMComponent.Mixin.updateComponent @ react.js：7713ReactDOMComponent.Mixin .receiveComponent @ react.js：7697ReactReconciler.rec eiveComponent @ react.js：14131ReactCompositeComponentMixin._updateRenderedComponent @ react.js：6884ReactCompositeComponentMixin._performComponentUpdate @ react.js：6863ReactCompositeComponentMixin.updateComponent @ react.js：6783ReactPerf.measure.wrapper @ react.js：13371ReactCompositeComponentMixin.receiveComponent @ react.js：6647ReactReconciler。 receiveComponent @ react.js：14131ReactChildReconciler.updateChildren @ react.js：4779ReactMultiChild.Mixin._updateChildren @ react.js：12900ReactMultiChild.Mixin.updateChildren @ react.js：12874ReactDOMComponent.Mixin._updateDOMChildren @ react.js：7862ReactDOMComponent.Mixin.updateComponent @ react.js：7713ReactDOMComponent.Mixin.receiveComponent @ react.js：7697ReactReconciler.receiveComponent @ react.js：14131ReactCompositeComponentMixin._updateRenderedComponent @ react.js：6884ReactCompositeComponentMixin._performComponentUpdate @ react.js：6863ReactCompositeComponentMixin.updateComponent @ react.js：6783ReactPerf.measure。 wrapper @ react.js：13371ReactC ompositeComponentMixin.receiveComponent @ react.js：6647ReactReconciler.receiveComponent @ react.js：14131ReactChildReconciler.updateChildren @ react.js：4779ReactMultiChild.Mixin._updateChildren @ react.js：12900ReactMultiChild.Mixin.updateChildren @ react.js：12874ReactDOMComponent.Mixin._updateDOMChildren @ react.js：7862ReactDOMComponent.Mixin.updateComponent @ react.js：7713ReactDOMComponent.Mixin.receiveComponent @ react.js：7697ReactReconciler.receiveComponent @ react.js：14131ReactCompositeComponentMixin._updateRenderedComponent @ react.js：6884ReactCompositeComponentMixin._performComponentUpdate @ react.js：6863ReactCompositeComponentMixin。 updateComponent @ react.js：6783ReactPerf.measure.wrapper @ react.js：13371ReactCompositeComponentMixin.receiveComponent @ react.js：6647ReactReconciler.receiveComponent @ react.js：14131ReactChildReconciler.updateChildren @ react.js：4779ReactMultiChild.Mixin._updateChildren @ react.js： 12900ReactMultiChild.Mixin.updateChildren @ react.js：12874ReactDOMCompo nent.Mixin._updateDOMChildren @ react.js：7862ReactDOMComponent.Mixin.updateComponent @ react.js：7713ReactDOMComponent.Mixin.receiveComponent @ react.js：7697ReactReconciler.receiveComponent @ react.js：14131ReactCompositeComponentMixin._updateRenderedComponent @ react.js：6884ReactCompositeComponentMixin._performComponentUpdate @ react.js：6863ReactCompositeComponentMixin.updateComponent @ react.js：6783ReactPerf.measure.wrapper @ react.js：13371ReactCompositeComponentMixin.receiveComponent @ react.js：6647ReactReconciler.receiveComponent @ react.js：14131ReactCompositeComponentMixin._updateRenderedComponent @ react.js：6884ReactCompositeComponentMixin._performComponentUpdate @ react.js：6863ReactCompositeComponentMixin.updateComponent @ react.js：6783ReactPerf.measure.wrapper @ react.js：13371ReactCompositeComponentMixin.performUpdateIfNecessary @ react.js：6680ReactReconciler.performUpdateIfNecessary @ react.js：14149runBatchedUpdates @ react.js：14899Mixin.perform @ react。 js：16625Mixin.perform @ r eact.js：16625assign.perform @ react.js：14843flushBatchedUpdates @ react.js：14923ReactPerf.measure.wrapper @ react.js：13371NESTED_UPDATES.close @ react.js：14799Mixin.closeAll @ react.js：16698Mixin.perform @ react。 js：16639assign.perform @ react.js：14843flushBatchedUpdates @ react.js：14923ReactPerf.measure.wrapper @ react.js：13371NESTED_UPDATES.close @ react.js：14799Mixin.closeAll @ react.js：16698Mixin.perform @ react.js： 16639assign.perform @ react.js：14843flushBatchedUpdates @ react.js：14923ReactPerf.measure.wrapper @ react.js：13371NESTED_UPDATES.close @ react.js：14799Mixin.closeAll @ react.js：16698Mixin.perform @ react.js：16639assign。执行@ react.js：14843flushBatchedUpdates @ react.js：14923ReactPerf.measure.wrapper @ react.js：13371NESTED_UPDATES.close @ react.js：14799Mixin.closeAll @ react.js：16698Mixin.perform @ react.js：16639assign.perform @ react.js：14843flushBatchedUpdates @ react.js：14923ReactPerf.measure.wrapper @ react.js：13371NESTED_UPDATES.close @ react.js：14799Mixin.closeAl l @ react.js：16698Mixin.perform @ react.js：16639assign.perform @ react.js：14843flushBatchedUpdates @ react.js：14923ReactPerf.measure.wrapper @ react.js：13371NESTED_UPDATES.close @ react.js：14799Mixin.closeAll @ react.js：16698Mixin.perform @ react.js：16639assign.perform @ react.js：14843flushBatchedUpdates @ react.js：14923ReactPerf.measure.wrapper @ react.js：13371NESTED_UPDATES.close @ react.js：14799Mixin.closeAll @ react。 JS：16698Mixin.perform @ react.js：16639assign.perform @ react.js：14843flushBatchedUpdates @ react.js：14923ReactPerf.measure.wrapper @ react.js：13371NESTED_UPDATES.close @ react.js：14799Mixin.closeAll @ react.js： 16698Mixin.perform @ react.js：16639assign.perform @ react.js：14843flushBatchedUpdates @ react.js：14923ReactPerf.measure.wrapper @ react.js：13371NESTED_UPDATES.close @ react.js：14799Mixin.closeAll @ react.js：16698Mixin。执行@ react.js：16639assign.perform @ react.js：14843flushBatchedUpdates @ react.js：14923ReactPerf.measure.wrapper @ react.js：13371NESTED_UPDATES。 close @ react.js：14799Mixin.closeAll @ react.js：16698Mixin.perform @ react.js：16639assign.perform @ react.js：14843flushBatchedUpdates @ react.js：14923ReactPerf.measure.wrapper @ react.js：13371NESTED_UPDATES.close @ react.js：14799Mixin.closeAll @ react.js：16698Mixin.perform @ react.js：16639assign.perform @ react.js：14843flushBatchedUpdates @ react.js：14923ReactPerf.measure.wrapper @ react.js：13371NESTED_UPDATES.close @ react。 js：14799Mixin.closeAll @ react.js：16698Mixin.perform @ react.js：16639assign.perform @ react.js：14843flushBatchedUpdates @ react.js：14923ReactPerf.measure.wrapper @ react.js：13371NESTED_UPDATES.close @ react.js： 14799Mixin.closeAll @ react.js：16698Mixin.perform @ react.js：16639assign.perform @ react.js：14843flushBatchedUpdates @ react.js：14923ReactPerf.measure.wrapper @ react.js：13371NESTED_UPDATES.close @ react.js：14799Mixin。 closeAll @ react.js：16698Mixin.perform @ react.js：16639assign.perform @ react.js：14843flushBatchedUpdates @ react.js：14923ReactPerf.measure.wrap per @ react.js：13371NESTED_UPDATES.close @ react.js：14799Mixin.closeAll @ react.js：16698Mixin.perform @ react.js：16639assign.perform @ react.js：14843flushBatchedUpdates @ react.js：14923ReactPerf.measure.wrapper @ react.js：13371NESTED_UPDATES.close @ react.js：14799Mixin.closeAll @ react.js：16698Mixin.perform @ react.js：16639assign.perform @ react.js：14843flushBatchedUpdates @ react.js：14923ReactPerf.measure.wrapper @ react。 js：13371NESTED_UPDATES.close @ react.js：14799Mixin.closeAll @ react.js：16698Mixin.perform @ react.js：16639assign.perform @ react.js：14843flushBatchedUpdates @ react.js：14923ReactPerf.measure.wrapper @ react.js： 13371NESTED_UPDATES.close @ react.js：14799Mixin.closeAll @ react.js：16698Mixin.perform @ react.js：16639assign.perform @ react.js：14843flushBatchedUpdates @ react.js：14923ReactPerf.measure.wrapper @ react.js：13371NESTED_UPDATES。 close @ react.js：14799Mixin.closeAll @ react.js：16698Mixin.perform @ react.js：16639assign.perform @ react.js：14843flushBatchedUpdates @ r eact.js：14923ReactPerf.measure.wrapper @ react.js：13371NESTED_UPDATES.close @ react.js：14799Mixin.closeAll @ react.js：16698Mixin.perform @ react.js：16639assign.perform @ react.js：14843flushBatchedUpdates @ react。 js：14923ReactPerf.measure.wrapper @ react.js：13371NESTED_UPDATES.close @ react.js：14799Mixin.closeAll @ react.js：16698Mixin.perform @ react.js：16639assign.perform @ react.js：14843

Answer 1

在this.forceUpdate()内调用componentDidUpdate会导致代码无限递归。每次组件的道具或状态发生变化以及调用componentDidUpdate时，都会调用forceUpdate()更新方法。因此，您获得componentDidUpdate - ＆gt; forceUpdate - ＆gt; componentDidUpdate - ＆gt; forceUpdate - ＆gt; ...... [无限递归]。

解决此问题：

1. 将this.props.deck订阅从componentDidUpdate移至componentDidMount。只有在安装组件时才需要添加该订阅，而不是每次更新任何内容时都添加。
2. 从forceUpdate()
中移除其他componentDidUpdate来电