Question

我正在创建一个使用react-beautiful-dnd的名为Answers的组件，还有另一个名为Timer的组件，它基本上是一个计时器。

这两个组件是我的App组件的子代。在我的App组件中，我有一个名为isGameOver的状态，当计时器达到零时，状态变为true。此状态作为道具传递到我的Answers组件，并且根据该道具，Droppable组件的isDropDisabled道具发生了变化。

通常此方法有效。但是，如果我在计时器到零时从组件中拖动某些东西，它将崩溃并给出

错误：不变式失败：在以下情况下不应重新创建计划程序捕获

我有点迷茫，我不知道这是否是react-beautiful-dnd的预期行为。

编辑：Microsoft Edge浏览器不会发生这种情况，可能是Firefox问题。回家后，我将进行更多测试。

数据格式：

var mydata = [
  {
    content: "universities",
    id: "1"
  },
  {
    content: "airlines",
    id: "2"
  }];

这是我的App组件：

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      remainingTime: 15,
      currentAnswers: mydata,
      gameOver: false
    };
  }

  checkGameOver = () => {
    if (this.state.remainingTime === 0) {
      this.setState({
        gameOver: true
      });
    }
  };

  eventFromTimerHandler = timeValue => {
    this.setState(
      {
        remainingTime: timeValue
      },
      this.checkGameOver
    );
  };

  render() {
    return (
      <div className="App">
        <div className="HeaderContainer">
          <Timer
            sendDataToParent={this.eventFromTimerHandler}
            duration={this.state.remainingTime}
          />
        </div>

        <div className="GameContainer">
          <Answers
            data={this.state.currentAnswers}
            gameOver={this.state.gameOver}
          />
        </div>
      </div>
    );
  }
}

答案组件：

class Answers extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: props.data
    };
  }

  onDragEnd = result => {
    if (!result.destination) {
      return;
    }

    const items = reorder(
      this.state.data,
      result.source.index,
      result.destination.index
    );

    this.setState({
      data: items
    });
  };

  render() {
    return (
      <div className="Answers">
        <DragDropContext onDragEnd={this.onDragEnd}>
          <Droppable
            isDropDisabled={this.props.gameOver}
            droppableId="droppable"
          >
            {(provided, snapshot) => (
              <div {...provided.droppableProps} ref={provided.innerRef}>
                {this.state.data.map((item, index) => (
                  <Draggable
                    isDragDisabled={this.props.gameOver}
                    key={item.id}
                    draggableId={item.id}
                    index={index}
                  >
                    {(provided, snapshot) => (
                      <Answer
                        content={item.content}
                        providedRef={provided}
                        id={item.id}
                        index={index}
                        gameOver={this.props.gameOver}
                      />
                    )}
                  </Draggable>
                ))}
                {provided.placeholder}
              </div>
            )}
          </Droppable>
        </DragDropContext>
      </div>
    );
  }
}

计时器组件：

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      display: props.duration
    };
    timerFunctionVariable = setInterval(this.changeDisplay, 1000);
  }

  changeDisplay = (prevState, props) => {
    this.setState({ display: this.state.display - 1 }, 
    ()=>this.props.sendDataToParent(this.state.display));
  };

  stopTimer = () => {
      if(this.state.display === 0){
          clearInterval(timerFunctionVariable);
      }
  }

  render() {
    this.stopTimer();
    return <div className="Timer">{this.state.display}</div>;
  }
}

设置isDragDisabled时发生不变失败错误

0 个答案: