为什么我的React应用程序中的后续警报显示给定会话中显示的第一个警报的“ useCountdown挂钩计时器”？

我的橡皮鸭没有给我答案。他通常更聪明。

在我的Create-React-App中，我有一个警报上下文和一个react组件，用于处理整个应用中的弹出警报。我是第一次玩React Hooks，并尝试在每个Alert上设置一个倒数计时器。

我编写了一个useCountdown钩子（如下所示的代码），该钩子在其他测试组件上也可以正常工作，但是当我尝试将其与警报一起使用时，给定会话中的每个警报都使用触发的第一个警报中的计时器值。

在此错误警报的屏幕快照中，显示的每个警报具有非常不同的倒计时值，但是它们都显示了第一个警报的倒计时值。倒数计时在右上角。

我已经使用过useEffect（）来尝试解决此问题，但很明显，我还有很多关于钩子及其作用域的知识要学习。

任何建议将不胜感激。最终，我将计时器设置为一个小的手动关闭按钮，并带有秒数，直到自动关闭显示为按钮的文本。现在...只是在丑陋的模式。

useCountdown挂钩

import { useState, useEffect } from 'react'

const useCountdown = (m = 1, s = 10) => {
  const [minutes, setMinutes] = useState(m)
  const [seconds, setSeconds] = useState(s)

  useEffect(() => {
    let myInterval = setInterval(() => {
      if (seconds > 0) {
        setSeconds(seconds - 1)
      }
      if (seconds === 0) {
        if (minutes === 0) {
          clearInterval(myInterval)
        } else {
          setMinutes(minutes - 1)
          setSeconds(59)
        }
      }
    }, 1000)
    return () => {
      clearInterval(myInterval)
    }
  })

  const finalSeconds = seconds < 10 ? `0${seconds}` : `${seconds}`

  return `${minutes}:${finalSeconds}`
}

export default useCountdown

警报组件

import React, { useContext, Fragment } from 'react'
import AlertContext from '../../context/alert/alertContext'
import { CSSTransition, TransitionGroup } from 'react-transition-group'
import styled from 'styled-components' // TODO Refactor to styled

// Custom hook to give each Alert a countdown timer
import useCountdown from '../../hooks/useCountdown' // BUG!

const Alerts = () => {
  // const testAlert = {
  //   id: 12345,
  //   title: 'Problem',
  //   color: 'alert-danger',
  //   icon: 'fas fa-exclamation-triangle',
  //   seconds: 20,
  //   msg: ['This is an alert. Testing 123.', 'Auto-dismiss in 20 seconds.'],
  // }

  const alertContext = useContext(AlertContext)
  const { removeAlert } = alertContext

  // ISSUE #32 The initial value gets used through-out session
  const countdown = useCountdown(alert.seconds)

  return (
    <Fragment>
      <TransitionGroup>
        {alertContext.alerts.length > 0 &&
          alertContext.alerts.map((alert) => (
            <CSSTransition key={alert.id} timeout={500} classNames='pop'>
              <div className={`alert ${alert.color}`}>
                <div className='alert-title'>
                  <h1 onClick={() => removeAlert(alert.id)}>
                    <i className={`${alert.icon}`} /> <span className='hide-sm'>{alert.title}</span>
                  </h1>
                  <span className='alert-countdown'>{countdown}</span>
                  <button className='btn btn-link btn-sm alert-btn hide-sm' onClick={() => removeAlert(alert.id)}>
                    <i className='far fa-times-square fa-3x' />
                  </button>
                </div>
                <div className='alert-items'>
                  <ul>
                    {alert.msg.map((item) => (
                      <li key={item}>
                        <i className='fas fa-chevron-circle-right'></i> <span>{item}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            </CSSTransition>
          ))}
      </TransitionGroup>
    </Fragment>
  )
}

export default Alerts