如何在反应中显示倒数/倒数

时间:2018-09-28 20:33:31

标签: reactjs

这是我目前的代码,我正在尝试使用react作为计数器。

 override func viewDidLoad() {
    super.viewDidLoad()


    questionViewModel.loadData { (isSuccess) in




        if(isSuccess == true)
        {

            self.questionViewModel.loadFromDummyData(completion: { (NH_DummyDataSourceModel) in




            let sec = self.questionViewModel.numberOfSections()
            for _ in 0..<sec
            {


                self.questionViewModel.answers1.append("")
                self.questionViewModel.questions1.append("")
                self.questionViewModel.questionlist1.append("")


            }
            //questionViewModel.numberOfSections()


            self.activityindicator.stopAnimating()
            self.activityindicator.isHidden = true
            self.tableview.refreshControl = self.refreshControl
            self.tableview.allowsMultipleSelection = false

            self.tableview.reloadData()
            })

        }
        else{
            self.activityindicator.stopAnimating()

            self.activityindicator.isHidden = true


            let controller = UIAlertController(title: "No Internet Detected", message: "This app requires an Internet connection", preferredStyle: .alert)
            // Create the actions
            let okAction = UIAlertAction(title: "OK", style: UIAlertAction.Style.default) {
                UIAlertAction in
                NSLog("OK Pressed")


                self.viewDidLoad()


            }
            controller.addAction(okAction)


            self.present(controller, animated: true, completion: nil)

        }

    // Uncomment the following line to preserve selection between presentations
    // self.clearsSelectionOnViewWillAppear = false

    // Uncomment the following line to display an Edit button in the navigation bar for this view controller.
    // self.navigationItem.rightBarButtonItem = self.editButtonItem
}
}



enter code here

我希望数字以指定的超时毫秒数从1到20,以便从1到2依次类推,依此类推,如何使用上述代码实现?

2 个答案:

答案 0 :(得分:1)

首先,您需要使用setTimeout来按指定的间隔运行方法,而不是setInterval

第二,您需要存储intervalID并确保在将组件卸载到componentWillUnmount之前将其停止。

class App extends Component {

    intervalID = 0;

    componentDidUpdate() {
        this.intervalID = setInterval(()=>
        {
        this.counter()
        }
        , 1000)
    }

    componentWillUnmount() {
        clearInterval(this.intervalID);
    }

    // rest of code redacted... for brevity

}

这是how to cancel the setInterval上的一个无耻的插件。

答案 1 :(得分:0)

您需要使用setInterval而不是setTimeout。另外,您可以在componentDidMount中启动计数器。

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      countstart : 1 ,
      countend : 20,
    };
    this.counter = this.counter.bind(this);
    this.count = this.count.bind(this);
  }

  componentDidMount() {
    this.count();
  }

  counter = () => {
    if(this.state.countstart < this.state.countend) {
      this.setState({countstart : this.state.countstart + 1})
    }
  }


  count() {
    setInterval(()=>
    {
    this.counter()
    }
     , 1000)
  }

  render() {
    return (
      <div>
        <Hello name={this.state.name} />
        <p>
          {this.state.countstart}
        </p>
      </div>
    );
  }
}