React Native天气应用报错：undefined is not an object (evaluating 'weatherOptions[condition].iconName')

错误原因 #

报错undefined is not an object (evaluating 'weatherOptions[condition].iconName')是因为你定义的weatherOptions对象仅包含Clouds这一种天气配置，但组件的propTypes里声明了多种天气类型（Thunderstorm、Drizzle、Rain等）。当传入这些未配置的天气类型时，weatherOptions[condition]会返回undefined，此时访问iconName就会触发错误。

修复方案 #

方案1：补全所有天气类型的图标配置 #

给weatherOptions添加propTypes中列出的所有天气类型对应的iconName（根据Ionicons的实际图标名称调整）：

const weatherOptions = {
  Clouds: {
    iconName: 'cloud',
  },
  Clear: {
    iconName: 'sunny',
  },
  Rain: {
    iconName: 'rainy',
  },
  Thunderstorm: {
    iconName: 'thunderstorm',
  },
  Drizzle: {
    iconName: 'water',
  },
  Snow: {
    iconName: 'snow',
  },
}

方案2：添加默认值处理未配置的情况 #

如果暂时不想补全所有配置，可以使用可选链操作符或条件判断，给未配置的天气类型设置一个默认图标：

// 使用可选链+默认值
<Ionicons
  name={weatherOptions[condition]?.iconName || 'cloud'}
  size={96}
  color="white"
/>

或者提前处理图标名称：

export default function Weather({ temp, condition }) { // 注意：组件名拼错了，应该是Weather
  const iconName = weatherOptions[condition] ? weatherOptions[condition].iconName : 'cloud';

  return (
    // ... 其余代码不变
    <Ionicons
      name={iconName}
      size={96}
      color="white"
    />
    // ... 其余代码不变
  );
}

另外注意组件名Wather拼写错误，建议改为Weather，避免后续维护混淆。

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