React出现Too many re-renders错误：天气背景视频切换问题求助

问题分析 #

你遇到的两个核心问题：

1. Too many re-renders错误：原代码在组件渲染阶段直接调用setWeather，每次渲染都会触发状态更新，导致组件无限重渲染循环。
2. useEffect修复后背景不切换：错误地将本地状态weather加入了useEffect依赖项，导致每次状态更新后又触发useEffect；同时原逻辑缺少多云场景的判断，且依赖项未正确关联props中的天气数据。

解决方案 #

方案一：直接基于props计算视频源（推荐） #

因为视频源完全由传入的天气数据决定，无需维护本地状态，直接通过props计算即可避免状态管理的问题：

import React, { Fragment } from "react";
import cloudy from "../assets/cloudy.mp4";
import sunny from "../assets/sunny.mp4";
import rainy from "../assets/rainy.mp4";
import winter from "../assets/winter.mp4";

const Background = (props) => {
  const { temp_c, precip_mm, cloud } = props.info.current;
  let weatherVideo = sunny; // 默认显示晴天视频

  // 根据天气数据匹配对应视频
  if (precip_mm > 2.5) {
    weatherVideo = rainy;
  } else if (temp_c < 8) {
    weatherVideo = winter;
  } else if (cloud > 50) { // 基于API返回的云量判断多云
    weatherVideo = cloudy;
  }

  return (
    <Fragment>
      <video autoPlay loop muted className="back-video">
        <source src={weatherVideo} type="video/mp4" />
      </video>
    </Fragment>
  );
};

export default Background;

方案二：使用useState+useEffect（如需维护本地状态） #

如果需要保留本地状态，需修正useEffect的依赖项和逻辑：

import React, { Fragment, useState, useEffect } from "react";
import cloudy from "../assets/cloudy.mp4";
import sunny from "../assets/sunny.mp4";
import rainy from "../assets/rainy.mp4";
import winter from "../assets/winter.mp4";

const Background = (props) => {
  const [weather, setWeather] = useState(sunny);
  const { temp_c, precip_mm, cloud } = props.info.current;

  useEffect(() => {
    let targetVideo = sunny;
    if (precip_mm > 2.5) {
      targetVideo = rainy;
    } else if (temp_c < 8) {
      targetVideo = winter;
    } else if (cloud > 50) {
      targetVideo = cloudy;
    }
    // 仅当目标视频与当前状态不同时更新，减少不必要重渲染
    if (targetVideo !== weather) {
      setWeather(targetVideo);
    }
  }, [temp_c, precip_mm, cloud]); // 依赖项为props中的天气数据，而非本地状态

  return (
    <Fragment>
      <video autoPlay loop muted className="back-video">
        <source src={weather} type="video/mp4" />
      </video>
    </Fragment>
  );
};

export default Background;

关键优化点 #

• 移除渲染阶段直接调用setWeather的逻辑，避免无限重渲染循环。
• 补充多云场景的判断逻辑，匹配你定义的cloudy视频资源。
• 确保useEffect的依赖项仅包含props中会变化的天气数据，避免循环触发更新。
• 增加状态更新的判断条件，仅当视频源确实变化时才更新状态。

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