模态倒数

Question

import React, { Component } from 'react';
import { Button, Header, Icon, Modal } from 'semantic-ui-react';
import { setInterval } from 'timers';

export default class LogoutModal extends Component {
  state = { timer};
  componentDidMount() {
    setInterval(() => this.today(), 1000);
  }

  today() {
    this.setState({
      timer:this.state.timer - 1
    });
  }

  render() {
    return (
      <Modal
        open={this.props.handleOpen}
        onClose={this.props.handleClose}
        basic
        size="small"
      >
        <Header icon="browser" content="Cookies policy" />
        <Modal.Content>Time left is: {this.state.timer}</Modal.Content>
        <Modal.Actions>
          <Button color="green" onClick={this.props.handleClose} inverted>
            <Icon name="checkmark" /> Got it
          </Button>
        </Modal.Actions>
      </Modal>
    );
  }
}

我正在尝试在semantinc ui模式上显示倒数，但它只显示5的计时器初始值。请怎么办？ 我正在尝试在semantinc ui模式上显示倒数，但它只显示5的计时器初始值。

Answer 1

我不确定'timer'是什么软件包，但是，我建议您将间隔放入CDM中自己的变量中，如果这不起作用，则应尝试使用普通setInterval。与此类似：

this.timer = setInterval(() => {
  this.setState({
    timer:this.state.timer - 1
  });
}, 1000);

此外，不要忘记在handleClose和componentWillUnmount中清除间隔。

clearInterval(this.timer);