React开发天气应用时weather-icons图标显示错误如何修复？

核心问题点 #

• 调用displayIcons方法时传参错误：你传入了setWeatherIcons这个state更新函数作为第一个参数，而非预期的图标映射对象
• state定义逻辑错误：weatherIcons这个state初始存储的是全量图标映射对象，但后续调用setWeatherIcons直接将其覆盖为单个图标类名字符串，破坏了原有映射结构，且该映射表属于固定常量，完全不需要存入state
• 缺省初始图标赋值逻辑：页面首次加载时没有给图标赋值，初始状态下图标不会渲染

具体修改步骤 #

1. 调整state定义，拆分固定映射与动态图标值 #

将固定不变的图标映射表从state中移除，单独声明为常量，新增专门存储当前生效图标的state：

// 固定图标映射表，属于不变常量无需存入state
const WEATHER_ICON_MAP = {
    Thunderstorm: "wi-thunderstorm",
    Drizzle: "wi-sleet",
    Rain: "wi-storm-showers",
    Snow: "wi-snow", 
    Atmosphere: "wi-fog",
    Clear: "wi-day-sunny",
    Clouds: "wi-day-fog"
}

const WeatherListing = () => {
    //States
    const [countryName,setCountryName] = useState(InitialData.name);
    const [temp, setTemp] = useState(InitialData.temp);
    const [maxTemp, setMaxTemp] = useState(InitialData.temp_max);
    const [minTemp, setMinTemp] = useState(InitialData.temp_min);
    const [WeatherDesc, setWeatherDesc] = useState(InitialData.description);
    const [name, setName] = useState("");
    // 新增存储当前图标的state，可指定默认初始值
    const [currentIcon, setCurrentIcon] = useState(WEATHER_ICON_MAP.Clear);

2. 重写displayIcons方法 #

const displayIcons = (rangeId) => {
    switch(true) {
        case rangeId >=200 && rangeId < 232 :
            setCurrentIcon(WEATHER_ICON_MAP.Thunderstorm);
            break;
        case rangeId >= 300 && rangeId <= 321: 
            setCurrentIcon(WEATHER_ICON_MAP.Drizzle);
            break;
        case rangeId >= 500 && rangeId <= 521:
            setCurrentIcon(WEATHER_ICON_MAP.Rain);
            break;
        case rangeId >= 600 && rangeId <= 622:
            setCurrentIcon(WEATHER_ICON_MAP.Snow);
            break;
        case rangeId >= 701 && rangeId <= 781:
            setCurrentIcon(WEATHER_ICON_MAP.Atmosphere);
            break;
        case rangeId === 800:
            setCurrentIcon(WEATHER_ICON_MAP.Clear);
            break;
        case rangeId >= 801 && rangeId <= 804:
            setCurrentIcon(WEATHER_ICON_MAP.Clouds);
            break;
        default : 
            setCurrentIcon(WEATHER_ICON_MAP.Clouds)
    }
}

3. 修正submitCountry中的调用逻辑 #

将原有的displayIcons(setWeatherIcons, result.weather[0].id)改为：

displayIcons(result.weather[0].id)

4. 修改渲染部分的图标类名 #

<i className={`wi ${currentIcon}`}></i>

如果你的InitialData中包含初始天气ID，可在组件挂载时调用一次displayIcons设置初始图标，保证首次加载即可正常显示。

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