Question

我有一个倒数计时器作为子元素。时钟达到0后，我会通知父组件更新状态以呈现其他内容。我在控制台中收到此错误，并且不确定如何解决。它也似乎陷入了循环。我想念什么？

错误- 警告：在现有状态转换期间（例如，在render之内，无法更新）。渲染方法应该纯粹是props和state的函数。

路径：Clock.jsx (parent)

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      timeComplete: false
    };
    this.myCallback = this.myCallback.bind(this);
  }

  myCallback = () => {
    this.setState({ timeComplete: true });
  };

  render() {
    let now = new Date();
    now.setSeconds(now.getSeconds() + 2); // timestamp
    now = new Date(now);

    return (
      <div className="container-fluid bg-light h-100">
        <CountdownTimer timerSeconds={now} callbackFromParent={this.myCallback} />
      </div>
    );
  }
}

export default Clock;

路径：CountdownTimer.jsx (child)

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

  render() {
    const { timerSeconds } = this.props;

    const renderer = ({ minutes, seconds, completed }) => {
      if (completed) {
        // Render a completed state
        this.props.callbackFromParent('listInfo');
      }
      return (
        <span>
          {minutes} min {seconds} sec
        </span>
      );
    };
    return <Countdown date={timerSeconds} renderer={renderer} />;
  }
}

export default CountdownTimer;

Answer 1

所以这对我来说是一个愚蠢的错误，但我相信其他人也会犯错。当您尝试更新父组件中的状态时，您需要从子组件中调用该函数。在这种情况下：

this.props.callbackFromParent('listInfo');

应该是

this.props.myCallback;

倒计时时间以触发父评论状态更改

1 个答案: