cập nhật trạng thái mỗi x giây

Question

Tôi đang cố cập nhật trạng thái 3 giây một lần.

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> 
    } 
} 

Tại sao điều này không cập nhật vị trí lượt xem của tôi sau mỗi 3 giây?

Answer 1

** Cập nhật để thực hiện TimerMixin

Bạn cần phải gọi một this.setState để cập nhật một biến trạng thái, và theo quy định của @ eyal83, sử dụng TimerMixin cho 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); 
} 

Tôi cũng đã thiết lập một ứng dụng cơ bản đặt lại biến trạng thái với mã setInterval here, dưới đây. 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

Sử dụng setTimeout và setInterval trên toàn cầu là một ý tưởng rất tồi.

Chúng tôi mạnh mẽ không khuyến khích sử dụng setTimeout toàn cầu (...) và đề xuất thay vào đó bạn sử dụng this.setTimeout (...) do phản hồi-timer-mixin cung cấp. Điều này sẽ loại bỏ rất nhiều công việc khó khăn theo dõi lỗi, chẳng hạn như tai nạn gây ra bởi timeouts bắn sau khi một thành phần đã được unmounted.

Thông tin thêm ở đây: https://facebook.github.io/react-native/docs/timers.html#timermixin

Bao gồm bộ đếm thời gian mixin như thế này:

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

Trong ES6, bạn nên sử dụng phản ứng-mixin, (https://github.com/brigand/react-mixin), ví dụ:

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 giải pháp mà làm việc cho tôi, tôi tìm thấy nó ở đây 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

việc mã này trong Phản ứng Native 0.47.1

import TimerMixin from 'react-timer-mixin'; 



mixins: [TimerMixin]; 

componentDidMount() { 

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

    }, 6000); //6 seconds 

}