React实时足球比分板：如何实现无需刷新的时间实时更新？

问题背景 #

我尝试调用示例API构建实时足球比分板，目前API调用正常且控制台无报错，但时间无法在不刷新页面的情况下实时更新。

问题原因 #

当前代码通过document.getElementById()直接修改DOM文本内容，这违背了React的状态驱动渲染核心机制。React只会在组件状态或props变化时触发重新渲染，直接操作DOM不会触发组件更新，所以页面上的时间看起来没有变化。

解决方案 #

改用React状态管理时间，让React自动处理UI更新：

1. 新增状态存储格式化后的更新时间
2. 在定时器中更新状态而非直接操作DOM
3. 在JSX中绑定该状态，实现实时渲染

修改后的完整代码 #

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

const Scoreboard = () => {
  const [homeScore, setHomeScore] = useState(0);
  const [awayScore, setAwayScore] = useState(0);
  // 新增状态存储更新时间
  const [lastUpdatedTime, setLastUpdatedTime] = useState(() => {
    const now = new Date();
    return `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
  });

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
        const data = await response.json();
        setHomeScore(data[0].id);
        setAwayScore(data[1].id);
      } catch (error) {
        console.error(error);
      }
    };

    fetchData();
  }, []);

  const timeInterval = useRef(null);

  useEffect(() => {
    timeInterval.current = setInterval(() => {
      updateTime();
    }, 1000);

    return () => {
      clearInterval(timeInterval.current);
    };
  }, []);

  const updateTime = () => {
    const now = new Date();
    const formattedTime = `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
    // 更新状态而非直接操作DOM
    setLastUpdatedTime(formattedTime);
  };

  return (
    <div className="scoreboard">
      <div className="team">
        <img
          src="https://upload.wikimedia.org/wikipedia/en/thumb/f/f8/Barcelona_logo.svg/220px-Barcelona_logo.svg.png"
          alt="Barcelona logo"
        />
        <h1>Barcelona</h1>
        <h2>{homeScore}</h2>
        {/* 绑定状态 */}
        <p>Last updated: {lastUpdatedTime}</p>
      </div>

      <div className="team">
        <img
          src="https://upload.wikimedia.org/wikipedia/en/thumb/a/a2/Real_Madrid_CF.svg/220px-Real_Madrid_CF.svg.png"
          alt="Real Madrid logo"
        />
        <h1>Real Madrid</h1>
        <h2>{awayScore}</h2>
        {/* 绑定状态 */}
        <p>Last updated: {lastUpdatedTime}</p>
      </div>
    </div>
  );
};

export default Scoreboard;

关键改动说明 #

• 新增lastUpdatedTime状态，初始化时设置当前时间
• updateTime函数不再操作DOM，而是通过setLastUpdatedTime更新状态
• JSX中直接使用{lastUpdatedTime}渲染时间，React会在状态变化时自动更新UI

额外优化建议 #

可以简化时间格式化逻辑，使用toLocaleTimeString的参数直接生成格式化时间：

const formattedTime = new Date().toLocaleTimeString('en-GB', {
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit'
});

内容的提问来源于stack exchange，提问作者user1365117