返回循环嵌套的条件开关与jsx？

Question

我正在使用天气API，并设法获得了所需的一切。但是，该API带有我想用我自己的动画天气图标替换的无聊和平淡的图标。我决定用自定义的动画天气图标代替天气图标。但是，我一直想弄清楚如何在return语句中返回自定义图标。

这是我的代码，很多，所以我只显示相关部分。

                    const weatherData = async () => {
                        // Get forecast 5 days etc..
                        const weatherResponse1 = fetch(`https://api.openweathermap.org/data/2.5/forecast?q=${data.city},${data.country_code}&appid=&units=imperial`)
                        
                        const [response1] = await Promise.all([weatherResponse1]);

                        const weatherJson1 = await response1.json();

                        let newForecast = []
                        let weathericonState = []

                        for (let i = 0; i < weatherJson1.list.length; i+=8){
                            switch (weatherJson1.list[i].weather[0].icon){
                                // clear night or few clouds day or night time or night mist
                                case '01n':
                                case '03n':
                                case '03d':
                                case '04n':
                                case '50n':
                                weathericonState = ( 
                                    <div class="icon cloudy">
                                        <div class="cloud"></div>
                                        <div class="cloud"></div>
                                    </div>
                                )
                                break;
                                // clear day time or day mist
                                case '01d':
                                case '50d':
                                weathericonState = (
                                    <div class="icon sunny">
                                        <div class="sun">
                                            <div class="rays"></div>
                                        </div>
                                    </div>
                                )
                                break;   
                                // broken clouds day time
                                case '04d':
                                weathericonState = (
                                    <div class="icon sun-shower">
                                        <div class="cloud"></div>
                                        <div class="cloud"></div>
                                        <div class="sun">
                                            <div class="rays"></div>
                                        </div>
                                    </div>
                                )
                                break;                                                     
                            }

                            newForecast.push(weatherJson1.list[i])
                        }
                    
                        this.setState({
                            weatherData: newForecast,
                        })
                    }

                    const weatherResults = weatherData();

                    weatherResults;

                }
            });
        }
    }

退货声明：

            return (
            <div className="container-fluid" id="userfluidprofile">
                    <div className="row">
                        <div className="col-md-7">
                            {
                                this.state.weatherData.map((row, index) => 
                                    <div className="weatherContainer" key={index}>
                                        // I want to replace this img with my custom animated icons returned from my nested looped conditional.
                                        <img src={'https://openweathermap.org/img/w/' + row.weather[0].icon + '.png'} alt="Weather Icon" />
                                    </div>
                                )
                            }   
                        </div>
                </div>
            </div>
        )