使用React Hooks的倒数计时器

Question

因此计时器起作用。如果我用特定的倒计时编号对this.state进行了硬编码，则在页面加载后计时器开始倒计时。我希望时钟在单击按钮时开始倒计时，并具有将null的state更改为随机生成的数字的功能。我对React有点陌生。我知道useState()仅设置初始值，但是如果我使用点击事件，如何重置useState()？我一直在尝试使用setCountdown(ranNum)，但它使我的应用程序崩溃。我确信答案是显而易见的，但我只是找不到。

如果我没有提供足够的代码，请告诉我。我不想发布整个shebang。

这是我的代码：

import React, { useState, useEffect } from 'react';

export const Timer = ({ranNum, timerComplete}) => {
    const [ countDown, setCountdown ] = useState(ranNum)
    useEffect(() => {
        setTimeout(() => {
            countDown - 1 < 0 ? timerComplete() : setCountdown(countDown - 1)
        }, 1000)
    }, [countDown, timerComplete])
    return ( <p >Countdown: <span>{ countDown }</span> </p> )
}

  handleClick(){
    let newRanNum = Math.floor(Math.random() * 20);
    this.generateStateInputs(newRanNum)
    let current = this.state.currentImg;
    let next = ++current % images.length;
    this.setState({
      currentImg: next,
      ranNum: newRanNum
    })
  }

 <Timer ranNum={this.state.ranNum} timerComplete={() => this.handleComplete()} />
 <Button onClick={this.handleClick}  name='Generate Inputs' />
 <DisplayCount name='Word Count: ' count={this.state.ranNum} />

Answer 1

useState就像您说的那样设置初始值，但就您而言，我认为您不希望将countDown存储在Timer中。原因是启动应用程序时ranNum为undefined，并以未定义的形式传递给Timer。装入Timer时，将以useEffect值触发此值，这是您不希望的，因为它将触发undefined。我相信您可以将setTimeout存储在countDown的父级中，从父级单击按钮时开始超时，然后将Timer值发送给countDown作为道具，这将使组件成为可能更容易理解。

Answer 2

您应该将Timer存储在父组件中，并将其传递给子组件。在父组件中，应使用变量来触发何时启动countDown。您可以尝试以下方法：

Timer