Question

我试图每隔3秒更新一次状态。

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

为什么这不会每3秒更新一次我的观点位置？

Answer 1

**更新以实现TimerMixin

您需要调用this.setState来更新状态变量，并按照指定 @ eyal83，将TimerMixin用于setTimeout＆amp; 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);
}

我还设置了一个基本应用程序，使用setInterval here重置状态变量，代码如下。 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

全局使用setTimeout和setInterval是一个非常糟糕的主意。

我们强烈建议不要使用全局setTimeout（...），而是建议您使用react-timer-mixin提供的this.setTimeout（...）。这将消除许多追踪错误的艰苦工作，例如卸载组件后因超时而导致的崩溃。

此处有更多信息：https://facebook.github.io/react-native/docs/timers.html#timermixin

包括这样的计时器mixin：

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

此代码适用于React Native 0.47.1

import TimerMixin from 'react-timer-mixin';

mixins: [TimerMixin];

export class MyClass extends Component {

    componentDidMount() {

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

        }, 6000); //6 seconds

    }

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

Answer 4

ES6解决方案对我有用，我在这里找到了 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

在ES6中，你应该使用react-mixin，（https://github.com/brigand/react-mixin），例如：

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 6

这是我使用组件的代码..

    import TimerMixin from 'react-timer-mixin';


    export default class MyComponent extends Component {

        componentDidMount(){
            TimerMixin.setTimeout.call(this, () =>{ 
                this.getData()
            },2000);
        }

        getData(){
            //call API HERE

        }

    }

每x秒更新一次状态

6 个答案: