如何更新单位列表倒计时

时间:2018-12-26 20:21:27

标签: react-native react-native-flatlist

我有一个要杀了我的问题。我可以在单位列表组件中更新倒计时。 这是我的代码:

App.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import moment from 'moment'
import Countdown from 'react-countdown-moment'

import HomeStudent from './src/screens/containers/homeStudent';
import Header from './src/sections/components/header';
import PermitsActive from './src/permits/containers/permitsActive';
import API from './utils/api';

type Props = {};
export default class App extends Component<Props> {
state = {
 permitActive:[],
}

async componentDidMount(){

permits = await API.getPermitActive(1);
console.log(permits)
this.x = setInterval(()=> {
  // Set the date we're counting down to
  var countDownDate = new Date("Dec 27, 2018 19:13:30").getTime();
  var now = new Date().getTime();
  var distance = countDownDate - now;
  if(permits.length > 0){
  permits[0].hours  = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  permits[0].minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  permits[0].seconds = Math.floor((distance % (1000 * 60)) / 1000);
}
  if (distance < 0) {
    clearInterval(this.x);
    this.setState({
      permitActive: [],
    })
    return
  }
  this.setState({
    permitActive: permits,
  })
}, 1000);

  }

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

 render() {
  return (
    <HomeStudent>
    <Header 
      title = "RU Madre Riquelme"
    />
    <PermitsActive 
      list = {this.state.permitActive}
      tempo = {this.state.seconds}
    />
    <Text>{this.state.seconds}</Text>
  </HomeStudent>
);
 }
}

子组件会收到道具,但不会在每次setinterval更新状态时更新。在本机响应中,我有些无法理解,如何实时地实时更新组件。

0 个答案:

没有答案