Javascript React js呈现的状态值落后一步

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

import React，{Component}来自'React'；
从“react bootstrap”导入{Button，Radio，FormGroup}；
从“../../AUXIDARY/AUXIDARY”导入Aux；
从'react router dom'导入{Redirect}；
导入“/TestScreen.css”；
类TestScreen扩展组件{
状态={
问题总数：60，
当前问题：1，
时间:50,，
分钟：空，
秒：空
};
changeQuestion=（）=>{
const question=this.state.current_question；
this.setState（{当前问题：问题+1}）；
};
componentDidMount（）{
const self=这个；
let timer=setInterval（函数（）{
const newTime=self.state.time-1；
常数分钟=数学楼层（自身状态时间/60）；
常数秒=（“0”+自状态时间%60）.slice（-2）；
self.setState（{minutes:minute，seconds:second，time:newTime}，（）=>{
log（“状态时间值：+self.state.Time”）；
});
}, 1000)
}
render（）{
返回(
问题{this.state.current_Question}/{this.state.total_questions}
{this.state.time==0？：console.log（“发生了一些错误”）}
{this.state.minutes}:{this.state.seconds}
试题说明
选择1
{' '}
选择2
{' '}
选择3
{/*************************************************************下一个问题按钮************************************************************************************************************************/}
下一个
{/**********************************************下一个问题结束按钮***************************************************************************************************************/}
);
}
}
导出默认测试屏幕当时间达到0时，在渲染时正在重定向。这就是为什么你不能看到0:00。而不是直接重定向。如果
时间===0
，则在
组件diddupdate
中渲染后进行检查，如果是，则清除间隔，并更新状态的
重定向
属性。重新提交视图时，
redirect:true
状态将触发实际重定向

注意：React是异步的。当状态更新依赖于当前状态时，最好使用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>
    );
  }
}

class TestScreen扩展组件{
状态={
问题总数：60，
当前问题：1，
时间:50,，
分钟：空，
秒：空，
重定向：false，
};
changeQuestion=（）=>
this.setState（（prevState）=>({
当前问题：prevState.current问题+1
}));
componentDidMount（）{
//将计时器分配给this.timer，以便您可以在componentWillUnmount中清除它
this.timer=setInterval（（）=>
this.setState（（{time}）=>({
分钟：时间/60，
秒：（“0”+时间%60）。切片（-2），
时间：时间-1
}))
, 1000)
}
componentDidUpdate（）{
const{time，redirect}=this.state；
如果（！reidrect&&time==0&&）{
clearInterval（这个计时器）；
这是我的国家({
重定向：true
});
}
}
render（）{
const{time，redirect，minutes，seconds}=this.state；
//只是相关的JSX部件
返回(
{redirect？:console.log（“发生了一些错误”）}
{分钟}：{秒}
);
}
}
将计时器和问题放在单独的组件中，timerComponent不应呈现。只需渲染您的questionComponent并将时间作为道具传递给您的questionComponent。
我尝试过这样做，但结果是一样的。我不知道react是如何工作的，但是如果有一种方法可以在调用setState函数后在JSX中呈现state的值呢？我得到了你答案中的异步行为部分，我只是想不出解决办法。因为根据我实现的逻辑，页面将在时间结束后被重定向，一旦计时器达到0:02，它将重定向现在看起来太难看的内容。非常感谢。我终于找到了我丢失的东西。我在控制台中打印状态变量“time”的值，而在渲染分和秒的值。我仍然不知道为什么几分钟和几秒钟之后会被更新，但是，我让它工作的方式是在JSX中实现逻辑，而不是设置状态变量。我感谢对重定向部分的澄清。我认为它更有组织性。谢谢。