Question

我想显示一个每秒增加一次的数字，而不是使用某种时间函数，而是使用window.setInterval，因为最终我将用一些更复杂的代码代替它，而不仅仅是显示数字会调用某些函数并显示结果。这是我现在拥有的代码：

export default class Test extends Component {
    constructor(props){
        super(props)
        this.state = {counter:0}
    }

    render(){
        newCounter = this.state.counter+1 // I am going to replace this
                                          // with something like:
                                          // newCounter = someFunc()
        func = this.setState

        window.setInterval(function(){
            func({counter:newCounter})
        },1000);

        return(
            <View>
                <Text>{this.state.counter}</Text>
            </View>
        )
    }
}

它给了我这个错误：undefined is not an object (evaluating 'this.updater')

如何正确执行此操作？谢谢

Answer 1

尝试一下：

export default class Test extends Component {
  constructor(props){
    super(props)
    this.state = {counter:0}
  }

  componentDidMount(){
    setInterval(() => {
        this.setState( prevState => ({counter: prevState.counter + 1}));
    },1000);
  }

  render(){
    return(
        <View>
            <Text>{this.state.counter}</Text>
        </View>
    )
  }
}

基本上，您想使用带有set Interval的功能箭头，以免丢失this关键字的上下文，并尝试在render方法之外使用set State。

这也是一个演示：https://snack.expo.io/HkikISZMm

react-native window.setInterval，尝试显示递增编号

1 个答案: