React天气图标设置触发无限循环报错，无法用useEffect如何解决？

问题根源在于你在JSX渲染流程中直接调用selectIcon函数，而该函数内部执行setWeatherIcon更新状态。每次组件渲染时，days.map会循环触发selectIcon，状态更新又会触发组件重新渲染，形成无限循环。同时这种写法会导致所有日期的图标都被覆盖为最后一个日期的图标，逻辑本身也存在错误。

修改方案 #

1. 将selectIcon改为纯函数，根据天气类型直接返回对应图标，不再修改组件状态
2. 移除weatherIcon状态变量，让每个日期独立获取自身对应的图标

修改后的代码 #

首先更新selectIcon函数：

const selectIcon = (type) => {
  switch (type) {
    case "sunny":
      return SunnyIcon;
    case "rainy":
      return RainyIcon;
    case "sunny rainy":
      return SunnyRainIcon;
    case "thunder":
      return ThunderIcon;
    case "sunny cloudy":
      return SunnyCloud;
    default:
      return ""; // 可根据需求设置默认图标
  }
};

然后修改组件的JSX部分：

return (
  <div className="WeeklyForecast">
    <div className="Prev-Btn">
      <button onClick={prevClick}>&lt;&lt;</button>
    </div>
    <div className="Forecast-List">
      {days.map((day) => (
        <div key={day}>
          <p>{day}</p>
          <img 
            src={selectIcon(selectedWeekData[day].type)} 
            alt={`${selectedWeekData[day].type} weather icon`} 
          />
          <p>{selectedWeekData[day].degree}°</p>
        </div>
      ))}
    </div>
    <div className="Next-Btn">
      <button onClick={nextClick}>&gt;</button>
    </div>
  </div>
);

修改后，渲染过程中不会触发状态更新，既解决了无限重渲染的报错，也能让每个日期显示正确的对应图标，同时无需使用useEffect，避免了加载屏相关的问题。

内容的提问来源于stack exchange，提问作者Fatih Demirbaş