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

我正在使用天气API，并设法得到我想要的一切。然而，api附带了一些无聊乏味的图标，我想用我自己的动画天气图标来代替它们。我决定用自定义的动画天气图标代替天气图标。然而，我一直在琢磨如何在return语句中返回自定义图标

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

const weatherData=async（）=>{
//获得预测5天等。。
const weatherResponse1=fetch(`https://api.openweathermap.org/data/2.5/forecast?q=${data.city}，${data.country\u code}&appid=&units=imperial`）
const[response1]=等待承诺。全部（[weatherResponse1]）；
const weatherJson1=wait response1.json（）；
让newForecast=[]
让weathericonState=[]
对于（设i=0；i}

能否包含较小的代码段？移除与问题无关的部分。这将使代码更容易阅读，从而增加您获得回复的机会。也可能修复你的缩进？当然，让我减少一些重复的部分。好的，我减少了所有与我的问题无关的代码，只包括与我的问题相关的部分。