javascript - React js 渲染状态值落后一步

Question

我是 React js 的新手。我通过 create-react-app 创建了一个项目，它实际上是一个“在线测试应用程序”。我在测试屏幕的一个模块中遇到问题 which looks like this .在我的 jsx 代码中，我像这样呈现状态变量的值。

import React, { Component } from 'react';
import { Button, Radio, FormGroup } from 'react-bootstrap';
import Aux from '../../Auxilary/Auxilary';
import { Redirect } from 'react-router-dom';
 
import './TestScreen.css';

class TestScreen extends Component{
    
    state = {
        total_questions:60,
        current_question:1,
        time: 50,
        minutes: null,
        seconds: null
    };
    changeQuestion = () => {
        const question = this.state.current_question;
        this.setState({current_question: question+1});
    };
    componentDidMount(){
        const self = this;
        
        
       let timer = setInterval(function() {
            const newTime = self.state.time -1;
            const minute = Math.floor(self.state.time/60);
            const second = ("0" + self.state.time%60).slice(-2);
            self.setState({minutes: minute, seconds: second, time: newTime},() =>{
                console.log("Value of state Time: " + self.state.time);
            });
            
          
        }, 1000)
    }
   
    render(){
        
        return(
            <Aux>
                <div className="question-timer">
                    <div className="question-number">
                        <h3>Question {this.state.current_question}/{this.state.total_questions}</h3>
                    </div>
                    <div className="test-timer">
                        {this.state.time === 0 ?  <Redirect to='/' /> : console.log("Some Error Occured")}
                        <h3>{this.state.minutes}:{this.state.seconds}</h3>
                    </div>
                </div>
                <div className="test-window">
                    <div className="test-question-statement">
                        <h2><label>Test Question Statement</label></h2>
                    </div>
                    <div className="question-options">
                    
                    <FormGroup>
                        <Radio name="radioGroup">
                            Option 1
                        </Radio>{' '}
                        <Radio name="radioGroup">
                            Option 2
                        </Radio>{' '}
                        <Radio name="radioGroup">
                            Option 3
                        </Radio>
                    </FormGroup>
                    </div>
        {/****************************************Next Question Button************************************************/}
                    <div className="next-question-button-container">
                        <Button onClick={this.changeQuestion} bsClass="xavor-style">Next</Button>
                    </div>
        {/*********************************End of Next Question Button************************************************/}
                </div>
                
            </Aux>

        );
    }
}

export default TestScreen;

我面临的问题是屏幕上呈现的时间比更新状态晚一步。由于我使用回调函数来更新状态，因此控制台上显示的值是准确的，但我的 JSX 中呈现的值落后了一步。例如:如果我的控制台打印“状态时间:1”，则呈现的值将为 0:02。如何更新状态的呈现值？任何帮助或建议将不胜感激。提前致谢。

Answer 1

当时间到达 0 时，您在渲染时正在重定向。这就是您看不到 0:00 的原因。而不是直接重定向。在 componentDidUpdate 渲染后检查，如果 time === 0，如果是则清除间隔，并更新状态上的 redirect 属性.重新呈现 View 时，redirect: true 状态将触发实际的重定向。

注意:React 的 setState是异步的。当状态更新依赖于当前状态时，最好使用 updater 方法。

class TestScreen extends Component{

  state = {
      total_questions:60,
      current_question:1,
      time: 50,
      minutes: null,
      seconds: null,
      redirect: false,
  };

  changeQuestion = () =>
    this.setState((prevState) => ({
      current_question: prevState.current_question + 1
    }));

  componentDidMount() {
    // assign the timer to this.timer, so you can clear it in componentWillUnmount
    this.timer = setInterval(() =>
      this.setState(({ time }) => ({
        minutes: time / 60,
        seconds: ("0" + time % 60).slice(-2),
        time: time - 1
      }))
    , 1000)
  }

  componentDidUpdate() {
    const { time, redirect } = this.state;

    if(!reidrect && time === 0 && ) {
      clearInterval(this.timer);

      this.setState({
        redirect: true
      });
    }
  }

  render() {
    const { time, redirect, minutes, seconds } = this.state;

    // just the relevant JSX parts
    return (
      <div className="test-timer">
        {redirect ?  <Redirect to='/' /> : console.log("Some Error Occured")}
        <h3>{minutes}:{seconds}</h3>
      </div>
    );
  }
}