反应：带倒计时的 setState

Question

我的主 App.js 类中有一个状态计数器。我还有一个 Countdown.js，每次他完成时都会更新他父类的计数器。但是当计时器完成一次时，我得到一个错误。此外，状态计数器从 0 跳到 2，而不是从 0 跳到 1...

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

我怎样才能摆脱这个错误？或者你有一个解决方案如何计数++，当计时器完成时？

我的班级 App.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;

Answer 1

嗯，就像错误所说的那样。您无法在渲染期间更新状态（例如在 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}
      />
    );
  }
}