React开发天气应用调用OpenWeatherMap API无法展示温度对象数据

一、温度无法正常显示的修复 #

问题原因 #

1. 你错误遍历了存储天气类型的weather数组来获取温度，该数组的元素仅包含天气分类相关属性，不存在temp字段，因此返回undefined
2. temperature状态的初始值声明为数组，但你存入的是接口返回的温度对象，类型不匹配存在潜在报错风险

修复步骤 #

1. 修正temperature状态的初始值类型：

// 原写法
const [temperature, setTemperature] = useState([]);
// 修正为
const [temperature, setTemperature] = useState({});

2. 删除原本遍历weather数组获取温度的错误代码，直接从temperature对象取值渲染，增加可选链避免初始为空时报错：

<h2 id="city">Islamabad</h2>
{/* 新增温度渲染代码 */}
{temperature?.temp && <h2 id="temp">{temperature.temp}°C</h2>}
{weather.map(weather => (
    <h2 key={weather.id} id="weather">{weather.main}</h2>
))}

二、状态写法优化建议 #

你当前声明两个useState存储数据的写法可以正常运行，也符合单一状态职责的原则，仍有以下优化空间：

• 合并状态管理：可以将所有天气相关数据存入同一个状态对象，后续新增字段（如风速、气压、城市信息等）无需额外声明状态，示例：

const [weatherData, setWeatherData] = useState({
  weatherList: [],
  temperature: {}
});

// 接口请求成功后赋值
setWeatherData({
  weatherList: weather.weather,
  temperature: weather.main
})

• 增加异常与加载状态：新增loading、error状态，请求过程中显示加载提示，请求失败时展示报错信息，提升用户体验
• 密钥安全优化：不要将API密钥硬编码在组件代码中，存入项目环境变量（如React项目的.env文件，命名为REACT_APP_OPENWEATHER_KEY），通过process.env.REACT_APP_OPENWEATHER_KEY调用，避免密钥泄露

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