React报错：Cannot read properties of undefined (reading 'name') 求助

核心原因 #

错误明确指向WeatherCard组件第90行尝试读取undefined值的name属性，大概率是以下两种情况：

• 传递给WeatherCard的对象类型props未正确赋值，比如你在组件里写了weather.city.name，但weather.city是undefined；
• 组件渲染时，异步获取的天气数据还未返回，初始状态为undefined，直接访问属性触发报错。

具体修复方法 #

1. 检查props传递与初始值 #

找到App.jsx中渲染WeatherCard的代码（第23行附近），确认传递的props是否有效。如果存在未定义的情况，给组件设置默认props兜底：

WeatherCard.defaultProps = {
  data: { city: { name: '' } }
};

2. 使用可选链操作符规避报错 #

在访问嵌套属性时，用?.操作符防止undefined触发错误，修改第90行的代码：

// 原错误代码示例
const cityName = data.city.name;
// 修改后
const cityName = data?.city?.name || '未知城市';

3. 增加加载状态判断 #

如果是异步数据加载导致的问题，在组件内先判断数据是否存在，再渲染内容：

function WeatherCard({ data }) {
  if (!data) {
    return <div>加载中...</div>;
  }
  // 后续正常渲染逻辑
  return <div>{data.city.name}</div>;
}

4. 验证数据结构 #

如果是从API获取天气数据，在组件内打印data确认实际返回结构是否符合预期：

console.log('WeatherCard接收的props:', data);

确保data里确实包含你要访问的name属性所在层级。

内容的提问来源于stack exchange，提问作者Shane Htet Aung