React JS中调用generateIconUrl函数报Split undefined的问题及修复方案

• 封装一个接收图标URL作为入参的工具函数，通过split方法拆分URL，提取URL最后一段作为图标名称
• 传入函数的原始图标URL为字符串类型，取自业务接口返回对象的属性值

• 控制台直接打印从对象属性取到的图标URL值完全正常，无空值、类型异常
• 将这个可正常打印的值传入自定义函数后，函数内部接收到的入参为undefined，执行split操作时触发Split is undefined报错

// 存在逻辑缺陷的图标URL生成函数
const generateIconUrl = code => {
   const lastItem = code.split("/").pop();

   let currentHour = moment().format("HH");
   let dayOrNight;

   if (currentHour >= 3 && currentHour < 12) {
      dayOrNight = "day";
   } else if (currentHour >= 20 && currentHour < 3) {
      dayOrNight = "night";
   }

   const iconBaseUrl = `/weatherIcons/${dayOrNight}/`;
   const iconUrl = iconBaseUrl + lastItem.slice(0, 3);

   return iconUrl;
};

对应的组件调用逻辑：

const WeatherIcon = data.current.condition.icon;

<img className="object-cover w-44" src={generateIconUrl(WeatherIcon)} alt="weather" />

问题根因说明

• 原函数将入参拆分逻辑放在函数最开头，当组件首次渲染时，异步请求的天气数据尚未返回，此时传入函数的WeatherIcon值为undefined，拆分操作直接触发类型错误。等数据加载完成后控制台能正常打印URL值，但首次渲染触发的报错已经中断了执行逻辑。
• 原URL拼接逻辑没有补全图标文件的.svg后缀，就算没有类型报错，也会出现图标资源加载失败的问题。

const generateIconUrl = code => {
   let currentHour = moment().format("HH");
   let dayOrNight;

   if (currentHour >= 3 && currentHour < 12) {
      dayOrNight = "day";
   } else if (currentHour >= 20 && currentHour < 3) {
      dayOrNight = "night";
   }

   const iconBaseUrl = `/weatherIcons/${dayOrNight}/${code.split("/").pop().slice(0, 3)}.svg`;

   return iconBaseUrl;
};

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