React native 每x秒更新一次状态

我正在尝试每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>
  }
}

导出默认类日历扩展组件{
建造师（道具）{
超级（道具）；
此.state={
timeLineTop:75，
};
}
render（）{
this.state.timeLineTop=setInterval（函数（）{
设d=新日期（）；
让结果=d.getHours（）+d.getMinutes（）/MINUTES（以小时为单位）；
返回结果；
}, 3000);
}
}

---

为什么不每3秒更新一次我的视图位置？

**更新以实现TimerMixin

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

我还设置了一个基本应用程序，用setInterval重置状态变量，代码如下

“严格使用”；
var React=require（'React-native'）；
变量{
评估学，
样式表，
文本，
看法
}=反应；
var TimerMixin=require（'react-timer-mixin'）；
var SampleApp=React.createClass({
mixin:[TimerMixin]，
getInitialState:函数（）{
返回{
时间表：75
}
},
componentDidMount:function（）{
此.setInterval（（）=>{
这是我的国家({
timeLineTop:this.state.timeLineTop+1
})
}, 500);
},
render:function（）{
返回(
TOP-{this.state.timeLineTop}
);
}
});
var styles=StyleSheet.create({
容器：{
弹性：1，
玛金托普：60，
},
});
AppRegistry.registerComponent（'SampleApp'，（）=>SampleApp）；

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

我们强烈反对使用全局setTimeout（…），建议您使用react timer mixin提供的.setTimeout（…）。这将消除跟踪bug的大量繁重工作，例如卸载组件后超时触发导致的崩溃

更多信息请点击此处：

包括计时器混音，如下所示：

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

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

---

在ES6中，应该使用react mixin，（），例如：

var reactMixin=require（'react-mixin'）；
var someMixin=require（'some-mixin'）；
类Foo扩展了React.Component{
render:function（）{return}
}
reactMixin（Foo.prototype，someMixin）；
reactMixin（Foo.prototype，someOtherMixin）ES6解决方案对我有效，我在这里找到了它

此代码在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);
    }
}

这是我使用组件的代码

    import TimerMixin from 'react-timer-mixin';


    export default class MyComponent extends Component {

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

        getData(){
            //call API HERE

        }

    }

对于setTimeout和setInterval，确实应该使用TimerMixin。有关更多信息，请参见我的答案。如何对ES6课程执行相同的操作？Thanksimport TimerMixin来自'react timer mixin'类SomeComp扩展了react.class{mixins:[TimerMixin]componendimount（）{this.setInterval（（）=>{console.log（'I not leak！'）；}，500）；}
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);
    }
}

    import TimerMixin from 'react-timer-mixin';


    export default class MyComponent extends Component {

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

        getData(){
            //call API HERE

        }

    }