Реагируйте: setState с обратным отсчетом - PullRequest
Новая
       40

Реагируйте: setState с обратным отсчетом

0 голосов
/ 27 января 2020

У меня в главном приложении есть счетчик состояний. js класс. Также у меня есть обратный отсчет. js, который обновляет счетчик родительского класса каждый раз, когда он заканчивает. Но я получаю ошибку, когда таймер закончил один раз. Кроме того, счетчик состояний переходит с 0 на 2, а не с 0 на 1 ... 

Warning: Cannot update during an existing state transition (such as within `render`).

Как я могу избавиться от этой ошибки? Или у вас есть решение, как считать ++, когда таймер закончен?

Приложение моего класса. js: 

import React from "react"
import "./App.css"
import Countdown from "./Countdown.js"

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      counter: 0
    };
    this.count = this.count.bind(this);
  }

  count() {
    this.setState(prevState => ({
      count: prevState.counter++
    }));
  }

  render() {
    return (
      <div className="window">
        <p>{this.state.counter}</p>
        <Countdown count={this.count} />
      </div>
    );
  }
}

export default App

Мой отсчет. js

import React from "react";
import CountDown from "react-countdown";

class CountdownQuestion extends React.Component {
  constructor() {
    super();
    this.state = {
      time: 3000
    };
  }

  render() {
    const renderer = ({ seconds, completed }) => {
      if (completed) {
        this.props.count();
        return <h2>Zeit abgelaufen</h2>;
      } else {
        return <h3>{seconds}</h3>;
      }
    };

    return (
      <CountDown date={Date.now() + this.state.time} renderer={renderer} />
    );
  }
}

export default CountdownQuestion;

1 Ответ

0 голосов
/ 27 января 2020

Ну, точно так же, как говорит ошибка. Вы не можете обновить состояние (как в вашей функции count()) во время рендеринга. Вы, вероятно, лучше использовать крючок onComplete. 

class CountdownQuestion extends React.Component {
  constructor() {
    super();
    this.state = {
      time: 3000
    };
  }

  render() {
    // Removing this.props.count() from this function also keeps it more clean and focussed on the rendering.
    const renderer = ({ seconds, completed }) => {
      if (completed) {
        return <h2>Zeit abgelaufen</h2>;
      } else {
        return <h3>{seconds}</h3>;
      }
    };

    return (
      <CountDown
        date={Date.now() + this.state.time}
        onComplete={this.props.count} // <-- This will trigger the count function when the countdown completes.
        renderer={renderer}
      />
    );
  }
}
...