方法调用时状态消失

Question

我正在做一个班级项目，我的状态正在消失。在componentDidMount之后，console.log（this.state）就可以了。我启动setInterval并调用inc（）。不知何故，当我进入inc（）时，状态就会消失。

import React from 'react';
import { TextInput,Button,StyleSheet, Text, View } from 'react-native';
import styles from './styles/styles.js';

debug=true

export default class App extends React.Component {
  constructor(){
    super()
    this.state={timer:'WORK',
                workTime: 25*60+0,
                breakTime: 5*60+0,
                currentTime:0,
                remainingTime:null,
                min:0,
                sec:0,
                startFlag:false,
                resetFlag:false}
  }
  componentDidMount(){
    this.interval=setInterval(this.inc,10000)
    if(debug)console.log('COMPONENTDIDMOUNT',this.state)
  }
  static getDerivedStateFromProps(nextProps, prevState) {
    if(debug)console.log('GETDERIVEDSTATEFROMPROPS',prevState)
  return null
  }
  shouldComponentUpdate(nextProps,nextState){
    if(debug)console.log('SHOULDCOMPONENTUPDATE',nextState)
    return true
  }
  componentDidUpdate(){
   if(debug)console.log('COMPONENTDIDUPDATE',this.state)
  }
  componentWillUnmount(){
   if(debug)console.log('COMMPONENTWILLUNMOUNT',this.state)
  }

  startToggle(){
    if(endTime === null)this.setState({remainingTime:this.state.workTime,
                                         startFlag:!this.state.startToggle})
    else this.setState({remainingTime:!this.state.startFlag})
  }
  textTime(){
    let min = Math.floor(this.state.remainingTime / 60).toString()
    let sec = (this.state.remainingTime % 60)
    if (sec < 10)sec ? '0' + sec : sec.toString()
    this.setState({min:min,sec:sec})
  }

  inc(){
    console.log(this.state)
  }

  captureInput(){}

  render() {
    console.log('RENDER',this.state)


    return (
      <View style={styles.container}>
        <Text style={styles.bigFont}>{`${this.state.timer + 'TIMER'}`}</Text>
        <Text style={styles.bigFont}>12:00</Text>
        <View style={styles.button}>
          <Button title='START' onPress={()=>this.startToggle()} />
          <Button title='RESET' onPress={()=>this.resetToggle()} />
        </View>
             <View style={styles.row}>
                <Text style={[styles.bold,{marginRight:10},{width:112},
                            {textAlign:'right'}]}>
                            'Work Timer:'</Text>
                <Text style={styles.bold}> min:</Text>
                <TextInput
                   defaultValue='50'
                   style={styles.input}
                   onChangeText={(text) => {this.captureInput(text)}}
                />
                <Text style={styles.bold}> sec:</Text>
                <TextInput
                   defaultValue='50'
                   style={styles.input}
                   onChangeText={(text) => {this.captureInput(text)}}
                />
             </View>
             <View style={styles.row}>
                <Text style={[styles.bold,{marginRight:10},{width:112},
                            {textAlign:'right'}]}>
                            'Break Timer:'</Text>
                <Text style={styles.bold}> min:</Text>
                <TextInput
                   defaultValue='50'
                   style={styles.input}
                   onChangeText={(text) => {this.captureInput(text)}}
                />
                <Text style={styles.bold}> sec:</Text>
                <TextInput
                   defaultValue='50'
                   style={styles.input}
                   onChangeText={(text) => {this.captureInput(text)}}
                />
             </View>
      </View>
    )
  }
}

Answer 1

你有2个选择：

1. 将inc()改为inc = () =>或
2. 将this.inc改为this.inc.bind(this)

Answer 2

将您的inc方法声明更改为

inc = () => {
  ...
}

根据你的代码，this里面的inc()并不是指component，因此你也没有获得state。

希望这会有所帮助！