Javascript 重新渲染组件不'；t更新功能组件内的对象

根据天气情况，应显示特定类型的图标

在我的

Weather

组件中，我创建了一个包含所有相关图标的对象。我这样做，而不是将其添加到

状态

，因为根据React：

你能根据你生活中的任何其他状态或道具来计算它吗 组成部分如果是这样，那就不是州政府

并且可以根据

this.currentWeather.main

的值计算图标

第一次运行时一切正常，但如果更改城市（换成不同天气类型的城市），图标将保持不变。我不明白为什么。（即尝试使用美国塔斯汀-->美国罗切斯特）

我尝试了

console.log（currentIcon）

，得到了一个symbol对象，在其中，它有正确的属性值，但没有正确显示

我的理解是，当状态更新时（通过您第二次进入另一个城市和国家时），

Weather

组件应该已经重新渲染，并且

return

语句之前的所有代码都应该重新运行，我相信它已经执行了

只是不确定为什么

return

语句中的

{currentIcon}

没有反映出这种变化

我想知道答案，但更重要的是，我想知道显示器为什么没有更新

constroot=document.querySelector（'.root'）；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
单位：''，
当前天气：{
主要内容：“，
描述：''，
临时工：''，
}
}
this.getWeather=this.getWeather.bind（this）；
this.unitHandler=this.unitHandler.bind（this）；
}
天气预报（东）{
e、 预防默认值（）；
const city=e.target.elements.city.value；
const country=e.target.elements.country.value；
常量appID='bf6cdb2b4f3c1293c29610bd1d54512b'；
const currentWeatherURL=`https://api.openweathermap.org/data/2.5/weather?q=${city}、${country}&units=imperial&APPID=${APPID}`；
常数预报器URL=`https://api.openweathermap.org/data/2.5/forecast?q=${city}、${country}&units=imperial&APPID=${APPID}`；
//仅获取当前天气数据
获取（currentWeatherURL）
.then（（response）=>response.json（））
。然后（（数据）=>{
这是我的国家({
单位：华氏度，
当前天气：{
main:data.weather[0]。main，
desc:data.weather[0]。说明，
温度：data.main.temp，
}
});
})
.catch（（）=>{console.log（'发生了错误，但我们发现了错误'））；
}
单位处理程序（e）{
函数转换器Tocelsius（华氏度）{
返回（（华氏32度）*5/9）
}
函数转换为华氏温度（摄氏度）{
返回（（摄氏度*9/5）+32）
}
//如果检查华氏温度
如果（e.target.value==='fahrenheit'）{
恒温器华氏温度=转换华氏温度（本状态当前天气温度）；
this.setState（prevState=>({
单位：华氏度，
当前天气：{
…prevState.currentWeather，
温度：华氏度，
}
}));
} 
//否则，将选中摄氏度
否则{
const celsiusTemp=convertToCelsius（this.state.currentWeather.temp）；
this.setState（prevState=>({
单位：摄氏度，
当前天气：{
…prevState.currentWeather，
温度：celsiusTemp，
}
}));
}
}
render（）{
返回(
)
}
}
//输入城市和州的组件
功能位置输入（道具）{
返回(
搜索
)
}
//用于转换所有单位的组件（华氏摄氏度）
功能单元转换器（props）{
返回(
华氏的
摄氏度
)
}
//基本天气组件（为每周预报制作专门组件的意图）
功能天气（道具）{
常量图标={
雷暴：，
毛毛雨：，
雨：，
雪：，
清楚：，
大气：“没有可用的图标”，
云：，
};
让currentIcon=icons[props.weatherStats.main.toLowerCase（）]；
console.log（当前图标）；
返回(
{props.location}
{props.day}
{currentIcon}
{props.weatherStats.main}
{props.weatherStats.desc}
{props.weatherStats.temp&{Math.round（props.weatherStats.temp）}{props.unit}
) 
}
//使用React的专门化概念从基础创建更具体的天气组件
功能当前天气（道具）{
const dateObj=新日期（）；
常量天数=[“星期日”、“星期一”、“星期二”、“星期三”、“星期四”、“星期五”]；
const currentDay=days[dateObj.getDay（）]；
返回(
)
}
ReactDOM.render（，root）
.weather应用程序{
文本对齐：居中；
}
·天气气流{
显示：内联块；
}
.wf容器{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
我想我看到了您的问题，请尝试以下方法：

 const icons = {
    thunderstorm: () => <i class="fas fa-bolt"></i>,
  };

const图标={
雷暴：（）=>，
};

将该对象中的每个图标更改为带有返回的函数

希望这有帮助

Lloyd
类组件中的
return（）
与函数组件中的
render（）
之间的区别是，在返回dom之前，始终会重新计算其中的值，更改函数组件中的道具可能不会返回所需的值

你可以试试这个：

  let currentIcon = () => icons[props.weatherStats.main.toLowerCase()]

在报税表中，使用
{currentIcon（）}
更改
{currentIcon}

<>你可能会考虑重新命名你的变量，比如<代码>让GETWeiTrimeIc/代码> 

"https://use.fontawesome.com/releases/v5.5.0/js/all.js"

"https://use.fontawesome.com/releases/v5.5.0/css/all.css"

 shouldComponentUpdate(prevProps){
  if (this.prevProps.weatherStats.main !== this.props.weatherStats.main){
      return true;
}