如何用React和Axios实现每秒更新内容并正确显示倒计时？

你遇到的核心问题是倒计时没有触发组件重新渲染，而且直接在render里用setInterval的方式完全错误——因为render函数会在每次组件更新时重复执行，这样会创建大量重复的定时器，同时setInterval返回的是定时器ID而非你需要的倒计时字符串，自然会显示错误值。

下面是针对你的类组件场景的具体修复方案：

1. 在AlertsBox组件中维护关键状态 #

首先要在组件的state里存储截止时间的时间戳（方便实时计算剩余时间），同时保存定时器ID，避免组件卸载后定时器继续运行导致内存泄漏：

class AlertsBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // 将props传入的deadline转为时间戳，后续计算更高效
      deadlineTimestamp: new Date(this.props.deadline).getTime(),
      timerId: null
    };
  }

2. 组件挂载后启动定时更新 #

在componentDidMount中启动setInterval，每秒触发一次state更新——不需要修改state的具体值，只要触发更新就能让React重新执行render，从而刷新倒计时：

componentDidMount() {
  const timerId = setInterval(() => {
    // 空更新触发render，render里会实时计算最新剩余时间
    this.setState({});
  }, 1000);
  this.setState({ timerId });
}

3. 组件卸载时清除定时器 #

一定要在componentWillUnmount中清除定时器，否则组件卸载后定时器仍会后台运行，造成内存泄漏：

componentWillUnmount() {
  clearInterval(this.state.timerId);
}

4. 在render中实时计算并渲染倒计时 #

现在可以把倒计时计算逻辑直接放到render里，每次state更新都会重新计算并显示最新的倒计时：

render() {
  const remaining = this.state.deadlineTimestamp - Date.now();
  
  // 处理倒计时结束的情况
  if (remaining <= 0) {
    return (
      <>
        {/* 你的其他组件内容 */}
        <figcaption>倒计时结束</figcaption>
      </>
    );
  }

  // 计算天、时、分、秒
  const seconds = Math.round((remaining / 1000) % 60);
  const minutes = Math.floor((remaining / 1000 / 60) % 60);
  const hours = Math.floor((remaining / (1000 * 60 * 60)) % 24);
  const days = Math.floor(remaining / (1000 * 60 * 60 * 24));

  // 拼接倒计时字符串，过滤掉为0的非必要部分
  const countdownParts = [];
  if (days >= 1) countdownParts.push(`${days} days`);
  if (hours >= 1) countdownParts.push(`${hours} hrs`);
  countdownParts.push(`${minutes} min`);
  countdownParts.push(`${seconds} sec`);

  return (
    // 你的其他组件内容（比如图片、奖励信息等）
    <figcaption>{countdownParts.join(' ')}</figcaption>
  );
}

额外优化：减少不必要的渲染 #

如果担心每秒更新会触发过多渲染，可以添加shouldComponentUpdate来控制，比如只有当秒数变化时才更新：

shouldComponentUpdate() {
  const currentSeconds = Math.round((this.state.deadlineTimestamp - Date.now()) / 1000);
  const nextSeconds = Math.round((this.state.deadlineTimestamp - Date.now()) / 1000);
  return currentSeconds !== nextSeconds;
}

这样就能实现倒计时每秒自动更新的效果，同时避免了内存泄漏和无效渲染的问题。

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