Reactstrap干扰React Hooks？秒表组件状态更新渲染异常求助

嘿，我之前也跟React Hooks和Reactstrap打过不少交道，先帮你拆解下问题～

首先可以明确的是：Reactstrap的Jumbotron组件并不会干扰React Hooks的状态更新，你的问题主要出在两个核心点上：状态更新的闭包陷阱，以及计时器逻辑的实现，另外可能还有样式层面的小误会。

1. 状态更新的闭包陷阱 #

你现在更新状态的方式是直接依赖当前的mSecs值：

setMSecs(mSecs + 1);

这会触发闭包陷阱——因为startTimer函数是组件初始渲染时创建的，它捕获的mSecs始终是初始值0，所以每次点击按钮，实际都是把mSecs设置为0+1=1，之后再点击也不会再增长了。

你觉得“Jumbotron外能生效”可能只是第一次点击时的视觉错觉，实际上多次点击后，外面的p标签也只会停在1不会变化。

解决方法是改用函数式更新，让React帮你获取最新的状态值：

setMSecs(prevMSecs => prevMSecs + 1);

同样，resetTimer里的状态更新也要调整（重置应该设为0，不是加1哦）：

setMSecs(0);
setSecs(0);
setMins(0);

2. 计时器逻辑的错误实现 #

现在你的startTimer只是单次更新状态，并没有启动持续的计时器。之前注释的setInterval写法也有问题：

// 错误写法：setInterval里的mSecs也是闭包捕获的初始值，每次都是0+1
setInterval(() => (setMSecs(mSecs + 1), console.log(mSecs)), 1000);

正确的做法是用useRef保存计时器的ID，同时在setInterval里使用函数式更新，还要处理毫秒到秒、秒到分钟的进位逻辑：

import React, { useState, useEffect, useRef } from "react";

// 在组件内添加ref保存计时器ID，避免重复启动
const timerRef = useRef(null);

function startTimer() {
  console.log("Start Timer Button clicked!");
  if (timerRef.current) clearInterval(timerRef.current);
  // 毫秒级更新用10ms间隔更准确
  timerRef.current = setInterval(() => {
    setMSecs(prevMSecs => {
      if (prevMSecs >= 99) {
        setSecs(prevSecs => {
          if (prevSecs >= 59) {
            setMins(prevMins => prevMins + 1);
            return 0;
          }
          return prevSecs + 1;
        });
        return 0;
      }
      return prevMSecs + 1;
    });
  }, 10);
}

// 停止计时器时清除ref里的ID
const stopTimer = () => {
  console.log('Stop Button clicked!');
  if (timerRef.current) {
    clearInterval(timerRef.current);
    timerRef.current = null;
  }
}

3. 关于Jumbotron内的状态不渲染 #

你代码里的第二个“Jumbotron”其实是原生的<div className='jumbotron'>，不是Reactstrap的<Jumbotron>组件，但不管是哪种，只要状态正确更新，组件都会重新渲染。如果还是看不到变化，检查下fontgradient类的CSS样式——比如是不是文字颜色和Jumbotron的背景色太接近，导致视觉上看不到变化。

你可以换成Reactstrap的<Jumbotron>组件试一下，比如：

<Jumbotron>
  <p className='fontgradient'> {mSecs} </p>
</Jumbotron>

只要状态更新正确，这里肯定会同步渲染最新值的。

修正后的完整代码示例 #

import React, { useState, useRef } from "react";
import './stopwatch.css';
import { Jumbotron } from "reactstrap";

function Stopwatch() {
  const [mSecs, setMSecs] = useState(0);
  const [secs, setSecs] = useState(0);
  const [mins, setMins] = useState(0);
  const timerRef = useRef(null);

  function startTimer() {
    console.log("Start Timer Button clicked!");
    if (timerRef.current) clearInterval(timerRef.current);
    timerRef.current = setInterval(() => {
      setMSecs(prevMSecs => {
        if (prevMSecs >= 99) {
          setSecs(prevSecs => {
            if (prevSecs >= 59) {
              setMins(prevMins => prevMins + 1);
              return 0;
            }
            return prevSecs + 1;
          });
          return 0;
        }
        return prevMSecs + 1;
      });
    }, 10);
  }

  const stopTimer = () => {
    console.log('Stop Button clicked!');
    if (timerRef.current) {
      clearInterval(timerRef.current);
      timerRef.current = null;
    }
  }

  function resetTimer(e){
    console.log('Reset Button clicked!');
    stopTimer();
    setMSecs(0);
    setSecs(0);
    setMins(0);
  }

  return(
    <header className='container'>
      <div className='row justify-content-md-center'>
        <div className='col-md-6 col-xs-12'>
          <Jumbotron>
            <div className='fontgradient'>Fullmetal Alchemist Stopwatch</div>
          </Jumbotron>
          <Jumbotron>
            {/* 格式化时间显示，更符合秒表逻辑 */}
            <p className='fontgradient'>{mins}:{secs.toString().padStart(2, '0')}:{mSecs.toString().padStart(2, '0')}</p>
          </Jumbotron>
          <p>{mins}:{secs.toString().padStart(2, '0')}:{mSecs.toString().padStart(2, '0')}</p>
          <button className='btn btn-primary' onClick={startTimer}>Start</button>
          <button className='btn btn-danger' onClick={stopTimer}>Stop</button>
          <button className='btn btn-warning' onClick={resetTimer}>Reset</button>
        </div>
      </div>
    </header>
  )
}

export default Stopwatch;

总结一下：问题和Reactstrap/Bootstrap完全无关，主要是状态更新的闭包问题和计时器逻辑错误，修正后就能正常工作啦～

内容的提问来源于stack exchange，提问作者David Scherer-ODell