Reactjs 时钟归零后，如何移动到新组件

我有一个React和Redux应用程序，包含3个部分-说明、故事和测验-每个部分都有自己的3个部分，因此总共有9个部分。说明中有一个按钮，允许用户进入故事部分，这样过渡就足够容易了。但是，我在故事组件中有一个计数器，当它达到零时，我需要使用它来转换到测验组件。 下面是我的代码

 import React, { Component } from 'react'
 import PropTypes from 'prop-types'

 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import { confirmInstructions, enterAnswersMaybeSave, getQuiz, getStory 
 } from '../actions'

 import Instructions from '../components/Instructions'
 import Story from '../components/Story'
 import Quiz from '../components/Quiz/index'

 const App = ({
   errorMessage,
   enterAnswersMaybeSave,
   showInstructions,
   confirmInstructions,
   currentTest,
   kind,
   storyData,
   show,
   timed,
   getQuiz,
   getStory,
   saveQuiz,
   complete,
   enabled,
 }) => {
   if (!currentTest) {
     return (
    <div>
      <p>
        The task is now complete. Thank-you for your time.{' '}
        <a href={window.wordpress.home}>Back to your dashboard</a>.
      </p>
      {errorMessage.length > 0 && <p>{errorMessage}</p>}
    </div>
  )

}
return (
 <div className="test">
   {showInstructions && (
     <Instructions
       currentTest={currentTest}
      confirmInstructions={() => confirmInstructions(currentTest)}
     />
   )}
   {!showInstructions && kind === 'story' && currentTest &&
     (
      <div>
        <Story
          kind='story'
          id={currentTest}
          timed={timed}
          show={show}
          enterAnswers={enterAnswersMaybeSave}
          getQuiz={() => getQuiz(currentTest)}
          complete={complete}


        />
      </div>
       )},
         {!showInstructions && kind === 'quiz' && currentTest &&
         (
           <Quiz
             currentTest={currentTest}
             submit={saveQuiz}
           />
         )}
     </div>
   )
 }


 App.PropTypes = {
   enterAnswersMaybeSave: PropTypes.func,
   showInstructions: PropTypes.bool,
   confirmInstructions: PropTypes.func,
   currentTest: PropTypes.number,
   kind: PropTypes.string, // TODO: enum this
   show: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   timed: PropTypes.number, // TODO: or undefined
   errorMessage: PropTypes.string,
 }
 function mapStateToProps(state) {
   console.log(state.kind); // state
   console.log(arguments[1]); // undefined
 }
 export default connect(
   state => {
     const getCurrent = state => state.storyData.find(t => t.id == 
 state.currentTest);

 const getCurrentStory = state => state.storyData.find(t => t.kind == 
 'story');
     return {
       showInstructions: state.currentTest && 
 !getCurrent(state).instructions,
       currentTest: state.currentTest,
       kind: state.currentTest && getCurrent(state).kind,
       show: state.currentTest && getCurrent(state).show,
       timed: state.currentTest && getCurrent(state).timed,
       answers: state.currentTest && getCurrent(state).answers,
       errorMessage: state.errorMessage,
       complete: state.complete,
       storyData: state.storyData

     }

   },
   dispatch =>
     bindActionCreators({ enterAnswersMaybeSave, confirmInstructions, 
 getQuiz, getStory}, dispatch)
 )(App)

这是我的减速机

---

您可能希望将时间存储在

redux

存储中，并使用计时器触发的操作来减少时间

在条件中为计时器使用redux道具，以确定是否应显示组件。像这样的方法应该会奏效：

{this.props.quiz.timer === 0 && renderQuizComponent()}

只要您有一个名为

quick

（请参阅）的redux reducer，它的值将映射到组件的道具和一个减少计时器并按间隔触发的操作，如：

setInterval(this.props.decrementTimer(), 1000);

---

我建议正确地执行此操作，根据MomentJS之类的库计算实际时间，但我认为这超出了此问题的范围。

我尝试执行上述操作，但某些操作一定不起作用。我已经在一个嵌套的时钟组件中实现了时间递减，当它达到零时，它会发送一个动作，将状态更改为零“键入：‘测验’。然后，我添加了一个条件，让组件根据类型进行渲染。但是由于某种原因，当减速器更新状态时，它要么不重新呈现组件，要么忽略条件……您是否尝试在页面上显式输出道具的值？只是为了确保它显示的是正确的东西。您构造条件语句的方式或连接组件中redux存储的方式可能有问题。您可能想考虑在与“<代码>类型< /代码>变量”交互作用下共享更多代码。另外，您可能还想考虑使用<代码>＝＝而不是<代码>＝。在React中使用严格的类型比较通常是一种很好的做法。嗯——我认为代码中可能仍然缺少一些相关的部分，但乍一看，似乎您正试图使用相同的缩减器来控制许多组件上的存储？您是否需要

const getCurrent=state=>state.storyData.find（t=>t.id==state.currentTest）

是否为每个测试返回唯一的存储？因为除非您将其专门映射到某个地方，以便将该reducer重新实现为多个reducer对象，否则您可能永远不会设置在

kind:state.currentTest&&getCurrent（state.kind）中所需的属性。这些其他属性是否有效？
{this.props.quiz.timer === 0 && renderQuizComponent()}

setInterval(this.props.decrementTimer(), 1000);