React-Native仿Uber项目遇TypeError: Cannot read property 'location' of null求助

• 技术栈：React-Native + Google Maps API，复刻Uber应用
• 核心错误：TypeError: Cannot read property 'location' of null
• 触发场景：
  • 使用地点选择功能时
  • 进入“get a ride”页面时
• 已尝试无效操作：删除重装node_modules、更新依赖包
• 矛盾点：HomeScreen页面打印data和details能看到数据，但origin.location.lat、origin.location.lng无法正常访问

1. 强制空值校验（最可能解决问题） #

报错本质是渲染时origin处于null/undefined状态，先给属性访问加安全校验：

// 替换直接访问的写法
const originLat = origin?.location?.lat;
const originLng = origin?.location?.lng;

或者在渲染依赖组件前做条件判断：

{origin && origin.location && (
  // 渲染地图标记、坐标相关内容
)}

2. 修正状态初始化逻辑 #

检查origin的初始状态设置，避免初始值为null导致的提前访问：

// 错误示例：初始值为null
const [origin, setOrigin] = useState(null);

// 优化方案1：初始化为带默认结构的对象
const [origin, setOrigin] = useState({ location: { lat: 0, lng: 0 } });

// 优化方案2：保持null，但严格校验后再使用

3. 追踪数据更新时机 #

在HomeScreen中监听origin状态变化，确认数据是否和渲染同步：

useEffect(() => {
  console.log('当前origin状态：', origin);
}, [origin]);

如果发现origin在组件渲染后才被赋值，需在“get a ride”页面添加加载状态，或路由跳转前确认origin已完成赋值。

4. 检查地点选择回调逻辑 #

确认地点选择后setOrigin传入的对象结构完整：

// 错误示例：缺少location属性
setOrigin({ name: 'XX地点' });

// 正确示例：确保包含location结构
setOrigin({
  name: 'XX地点',
  location: {
    lat: 12.3456,
    lng: 78.9012
  }
});

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