React native 计数器和间隔赢了';停不下来

React native 计数器和间隔赢了';停不下来,react-native,expo,React Native,Expo,我不熟悉react native,我想在计数器变为9时通过(componentWillUnmount()函数和“show”)停止计数器并停止间隔,但计数器和间隔不会停止,并且没有错误,所以问题出在哪里 class Counter extends Component { constructor(){ super() this.state = { count : 0, show : true } } componentDidMount()

我不熟悉react native,我想在计数器变为9时通过(componentWillUnmount()函数和“show”)停止计数器并停止间隔,但计数器和间隔不会停止,并且没有错误,所以问题出在哪里

class Counter extends Component {
  constructor(){
    super()
    this.state = {
      count : 0,
      show : true
    }
  }
  componentDidMount() {
    this.interval = setInterval(this.incrementCount, 1000)
  }
  componentWillUnmount(){
    clearInterval(this.interval)
  }
  toggleCounter = () => this.setState(prevState => ({
    show : !prevState.show,
  }))
  incrementCount = () => {
      console.log("inc")
      this.setState(prevState => ({count: prevState.count + 1}))
  }

  render() {
  if (this.state.count > 9 ){
    console.log("the if statement")
    this.toggleCounter
  }

    if(this.state.show)
    {
      return (<Text style ={styles.text}>{this.state.count}</Text>);
    }else{
      return null 
    }
  }
}
类计数器扩展组件{
构造函数(){
超级()
此.state={
计数:0,
秀:真的
}
}
componentDidMount(){
this.interval=setInterval(this.incrementCount,1000)
}
组件将卸载(){
clearInterval(this.interval)
}
toggleCounter=()=>this.setState(prevState=>({
show:!prevState.show,
}))
递增计数=()=>{
控制台日志(“inc”)
this.setState(prevState=>({count:prevState.count+1}))
}
render(){
如果(this.state.count>9){
log(“if语句”)
这是开关计数器
}
if(this.state.show)
{
返回({this.state.count});
}否则{
返回空值
}
}
}
这是对您的帮助

import React, { Component } from 'react'
import { Text, View } from 'react-native' 

export default class App extends Component {
state={
 count:0
}
componentDidMount(){
let count=setInterval( () => { 
  if(this.state.count<=9){
  this.setState({
    count:this.state.count+1
  })
 }
 else{
  clearInterval(count)
 }
 }, 1000);

 }


render() {
return (
  <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
    <Text> {this.state.count} </Text>
  </View>
  )
 }
}
import React,{Component}来自“React”
从“react native”导入{Text,View}
导出默认类应用程序扩展组件{
陈述={
计数:0
}
componentDidMount(){
let count=setInterval(()=>{

如果(this.state.countPut console.log in componentWillUnmount())尝试更改为箭头函数:componentDidMount=()=>和componentWillUnmount()。在呈现这个时。toggleCounter()//您编写这个函数时没有作用域