React父组件传forecasts数组元素给WeatherCard致空白页，新手求助

问题核心是初始渲染阶段forecasts为空数组或未定义，直接取forecasts[0]会传递undefined给WeatherCard，如果组件没处理这种情况就会导致页面空白。按以下步骤修复：

1. 确保forecasts的初始状态是数组 #

在useState初始化时明确设为空数组，避免初始值为undefined：

const [forecasts, setForecasts] = useState([]);

2. 增加条件渲染，确保有数据再传递 #

只有当forecasts有数据时才渲染WeatherCard，避免传递无效值：

{forecasts.length > 0 && <WeatherCard weather={forecasts[0]} />}

或者用可选链+默认值兜底，保证weather始终是有效对象：

<WeatherCard weather={forecasts[0] ?? { temp: 0, condition: '暂无数据' }} />

（注：??后面的默认对象要和WeatherCard期望的属性结构匹配）

3. 给WeatherCard设置默认Props #

在WeatherCard组件里定义默认属性，即使传入undefined也能正常渲染：

WeatherCard.defaultProps = {
  weather: {
    temperature: 0,
    description: '加载中...',
    date: new Date().toLocaleDateString()
    // 按组件实际需要的属性补充默认值
  }
};

4. 验证数据结构一致性 #

手动打印forecasts确认数据结构和你手动传递的静态数据完全一致：

console.log('API返回的forecasts:', forecasts);

如果API返回的字段和静态数据的字段名不匹配（比如静态数据用temp，API返回temperature），也会导致WeatherCard无法正确渲染。

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