stato di aggiornamento ogni x secondi

Question

Sto tentando di aggiornare uno stato ogni 3 secondi.

export default class Calendar extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     timeLineTop: 75, 
    }; 
    } 

render() { 
    this.state.timeLineTop = setInterval(function() { 
     let d = new Date(); 
     let result = d.getHours() + d.getMinutes()/MINUTES_IN_HOUR; 

     return result; 
    }, 3000); 

    <View style={[ 
      { top: this.state.timeLineTop }, 
     ]}></View> 
    } 
} 

Perché questo non aggiorna la posizione delle visualizzazioni ogni 3 secondi?

Answer 1

** aggiornato per implementare TimerMixin

È necessario chiamare un this.setState per aggiornare una variabile di stato, e come specificato dal @ eyal83, utilizzare il TimerMixin per setTimeout & setInterval:

var TimerMixin = require('react-timer-mixin'); 

componentDidMount: function() { 
    this.setInterval(() => { 
     let d = new Date(); 
     let result = d.getHours() + d.getMinutes()/MINUTES_IN_HOUR; 
     this.setState({ 
      timeLineTop: result 
     }) 
    }, 500); 
} 

Ho anche impostato un'app di base che reimposta la variabile di stato con un setInterval here, il codice è di sotto. https://rnplay.org/apps/9gD-Nw

'use strict'; 

var React = require('react-native'); 
var { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
} = React; 

var TimerMixin = require('react-timer-mixin'); 

var SampleApp = React.createClass({ 
    mixins: [TimerMixin], 
    getInitialState: function() { 
     return { 
      timeLineTop: 75 
     } 
    }, 

    componentDidMount: function() { 
    this.setInterval(() => { 
     this.setState({ 
     timeLineTop: this.state.timeLineTop+1 
     }) 
    }, 500); 
    }, 

    render: function() { 

    return (
     <View style={styles.container}> 
     <View style={[ 
      { marginTop: this.state.timeLineTop }, 
     ]}><Text>TOP - {this.state.timeLineTop}</Text></View> 
     </View> 
    ); 
    } 
}); 

var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    marginTop:60, 
    }, 
}); 

AppRegistry.registerComponent('SampleApp',() => SampleApp); 

Answer 2

Uso setTimeout e setInterval è globalmente una pessima idea.

Si sconsiglia vivamente di utilizzare il setTimeout globale (...) e si consiglia invece di utilizzare this.setTimeout (...) fornito da react-timer-mixin. Questo eliminerà un sacco di duro lavoro per rintracciare i bug, come gli arresti anomali causati dai timeout che si attivano dopo che un componente è stato smontato.

Maggiori informazioni qui: https://facebook.github.io/react-native/docs/timers.html#timermixin

Includere il mixin temporizzatore in questo modo:

var TimerMixin = require('react-timer-mixin'); 

var Component = React.createClass({ 
    mixins: [TimerMixin], 
    componentDidMount: function() { 
    this.setInterval(
    () => { console.log('I do not leak!'); }, 
     500 
    ); 
    } 
}); 

Answer 3

In ES6, si dovrebbe usare reagire-mixin, (https://github.com/brigand/react-mixin), ad esempio:

var reactMixin = require('react-mixin'); 
 
var someMixin = require('some-mixin'); 
 
class Foo extends React.Component { 
 
    render: function(){ return <div /> }  
 
} 
 
reactMixin(Foo.prototype, someMixin); 
 
reactMixin(Foo.prototype, someOtherMixin);

Answer 4

ES6 soluzione che ha funzionato per me, ho trovato qui https://github.com/reactjs/react-timer-mixin/issues/4

componentDidMount() { 
this.timer = setTimeout(() => { 
    console.log('I do not leak!'); 
}, 5000); 
} 

componentWillUnmount() { 
clearTimeout(this.timer); 
} 

Answer 5

Questo lavoro codice nativo Reagire 0.47.1

import TimerMixin from 'react-timer-mixin'; 



mixins: [TimerMixin]; 

componentDidMount() { 

    this.interval = setInterval(() => { 
     console.log("Hi"); 

    }, 6000); //6 seconds 

}