Уменьшение числа в государстве-ответчике

Question

Я пытаюсь уменьшить мою собственность timeLeft на моем штате один раз в секунду. В функции startRecording я вызываю метод startTimer, но, похоже, не может уменьшить состояние. Что я делаю не так? Благодаря!

class NimbusCamera extends Component { 
    static propTypes = { 
    dispatch: PropTypes.func.isRequired, 
    navigator: PropTypes.object.isRequired 
    } 
    state = { 
    camera: { 
     aspect: Camera.constants.Aspect.fill, 
     captureTarget: Camera.constants.CaptureTarget.disk, 
     type: Camera.constants.Type.front, 
     captureMode: Camera.constants.CaptureMode.video, 
     captureAudio: true, 
     flashMode: Camera.constants.FlashMode.auto 
    }, 
    isRecording: false, 
    timeLeft: 30, 
    reachedLimit: false 
    } 
    startTimer =() => { 
    console.log('Starting timer...') 
    let timerId = setInterval(countdown, 1000); // Run function every second 
    const countdown =() => { 
     console.log('Counting down...') 
     if (this.state.timeLeft === 0) { 
     clearTimeout(timerId); 
     this.setState({isRecording: false}) 
     } else { 
     console.log(Decrementing...) 
     this.setState({timeLeft: this.state.timeLeft - 1}); 
     } 
    } 
    } 
    render() { 
    console.log(this.state) 
    return (
     <View style={styles.container}> 
     <Camera 
      ref={(cam) => { 
      this.camera = cam; 
      }} 
      style={styles.preview} 
      aspect={this.state.camera.aspect} 
      type={this.state.camera.type} 
      captureAudio={this.state.camera.captureAudio} 
      flashMode={this.state.camera.flashMode} 
      > 
      <Text>{this.state.timeLeft}</Text> 
      <Text style={styles.capture} onPress={this.startRecording.bind(this)}>[CAPTURE]</Text> 
      <Text style={styles.capture} onPress={this.stopRecording.bind(this)}>[STOP]</Text> 
     </Camera> 
     </View> 
    ); 
    } 

    startRecording =() => { 
    if (this.camera) { 
     this.camera.capture({mode: Camera.constants.CaptureMode.video}) 
      .then((data) => this.props.dispatch(getPath(data.path))) 
      .catch(err => console.error(err)); 
     this.startTimer(); 
     this.setState({ 
     isRecording: true 
     }); 
    } 
    } 

    stopRecording =() => { 
    if (this.camera) { 
     this.camera.stopCapture(); 
     this.setState({ 
     isRecording: false 
     }); 
    } 
    } 
} 

Answer 1

Простой способ;

this.setState({timeLeft: this.state.timeLeft - 1});

Answer 2

Incrementers как ++ и - не будут работать. В любое время, когда вы хотите обновить состояние на основе предыдущего значения состояния, вы должны использовать этот синтаксис.

this.setState((prevState) => ({ timeLeft: prevState.timeLeft - 1 }); 

Попробуйте поместить свой объект состояния в конструкторе:

constructor(props){ 
    super(props); 
    this.state = { 
    camera: { 
     aspect: Camera.constants.Aspect.fill, 
     captureTarget: Camera.constants.CaptureTarget.disk, 
     type: Camera.constants.Type.front, 
     captureMode: Camera.constants.CaptureMode.video, 
     captureAudio: true, 
     flashMode: Camera.constants.FlashMode.auto 
    }, 
    isRecording: false, 
    timeLeft: 30, 
    reachedLimit: false 
} 

Answer 3

Поскольку -- выполняет послеtimeLeft в объекте назначается. Это не ссылка, поэтому значение setState получает значение до декремента.

var out = document.getElementById('out'); 
 
var outCorrect = document.getElementById('outCorrect'); 
 

 
function setState(newState) { 
 
    out.innerHTML = newState.timeLeft; 
 
} 
 

 
function setStateCorrect(newState) { 
 
    outCorrect.innerHTML = newState.timeLeft; 
 
} 
 

 

 
var timeLeft = 10; 
 

 
setState({timeLeft: timeLeft--}); 
 

 
var timeLeftCorrect = 10; 
 

 
setStateCorrect({timeLeft: timeLeftCorrect - 1});

<span id="out"></span> 
 
<span id="outCorrect"></span>

Выполнить фрагмент кода и почему. a - b выполняет до Полученное значение присваивается, a-- выполняется после.