本文详解 React Native 项目中因误判 null 与 undefined 导致的渲染崩溃问题，重点说明如何在函数组件中安全校验 Context 提供的异步数据（如 API 响应），避免 TypeError: Cannot read property 'xxx' of null。
本文详解 react native 项目中因误判 `null` 与 `undefined` 导致的渲染崩溃问题，重点说明如何在函数组件中安全校验 context 提供的异步数据（如 api 响应），避免 `typeerror: cannot read property 'xxx' of null`。
在 React Native 的函数组件中使用 Context 管理异步 API 数据时，一个常见却极易被忽视的陷阱是：错误地将 null 等同于 undefined 进行条件判断。正如本例所示，Search 组件通过 useContext(ApiContext) 获取 details，并在渲染前执行如下判断：
const { details } = useContext(ApiContext);
if (details !== undefined) {
// 渲染主界面（依赖 details.adult、details 等）
} else {
// 渲染加载指示器
}该逻辑看似合理，但实际失效——因为 CallApiProvider 初始化 useState(null)，且在 API 请求完成前 details 始终为 null，而非 undefined。因此 details !== undefined 恒为 true，导致组件尝试访问 details.adult（即 null.adult），最终抛出 TypeError: Cannot read property 'adult' of null。
✅ 正确做法是：显式检查 null 或使用“真值判断”。推荐以下任一方式：
-
方式一（推荐）：直接使用真值判断（falsy check）
null、undefined、false、0、'' 均为 falsy，而初始 null 和未加载完成时的状态完全匹配：if (!details) { return ( <ScrollView style={styles.container}> <ActivityIndicator size="large" /> </ScrollView> ); } // 此时 details 必然存在且为数组/对象，可安全使用 return ( <ScrollView style={styles.container}> <Busca dica={"Type title, categories, years, etc"} /> {/* 其他依赖 details 的组件 */} <MovieCarousel data={details} /> </ScrollView> ); -
方式二：显式比对 null
if (details === null) { /* 加载中 */ } else if (details === undefined) { /* 理论上不会发生，但可作为兜底 */ } else { /* 已加载成功 */ }
⚠️ 注意事项：
- 不要混用 ==（抽象相等）——null == undefined 为 true，但 null == 0 或 null == '' 均为 false，语义模糊且易出错；始终使用 === 或直接 !value。
- useState(null) 的初始值决定了首次渲染时的值类型，务必与条件判断保持一致。若初始化为 undefined（如 useState() 不传参），才可用 !== undefined，但 null 是更明确、更常见的初始占位符。
- 在 TypeScript 项目中，可通过严格类型定义（如 const [details, setDetails] = useState
(null as unknown as Movie[]) 或 useState (null)）进一步规避运行时错误。
? 总结：在 React Native（及通用 React）中，判断异步数据是否就绪，本质是判断其是否为 truthy。优先采用 if (!data) 而非 if (data !== undefined)，既简洁又健壮；同时确保 useState 的初始值与判断逻辑严格对齐——这是避免“看似有 if 却仍崩溃”的关键所在。
