在 React Native 中使用 Context 管理 API 数据时，若在组件中通过 useContext 获取状态并进行条件渲染，需注意初始值为 null 而非 undefined，错误地使用 details !== undefined 会导致空值访问异常（如 Cannot read property 'adult' of null）。
在 react native 中使用 context 管理 api 数据时，若在组件中通过 `usecontext` 获取状态并进行条件渲染，需注意初始值为 `null` 而非 `undefined`，错误地使用 `details !== undefined` 会导致空值访问异常（如 `cannot read property 'adult' of null`）。
在你提供的 Search 组件中，核心问题出在条件判断逻辑：
const { details } = useContext(ApiContext);
if (details !== undefined) { // ❌ 错误：initial state 是 null，不是 undefined
// 渲染主界面
} else {
// 渲染 loading
}由于 CallApiProvider 中使用 useState(null) 初始化 details，其初始值是 null，而非 undefined。JavaScript 中 null !== undefined 为 true，因此该 if 条件始终成立，导致代码立即尝试访问 details.adult —— 此时 details 为 null，从而抛出 TypeError: Cannot read property 'adult' of null。
✅ 正确做法是检查 details 是否“存在且非空”，推荐以下任一写法（语义清晰、符合 React 最佳实践）：
if (!details) { // ✅ 推荐：falsy check（涵盖 null, undefined, [] 等，但需注意空数组场景）
return (
<ScrollView style={styles.container}>
<ActivityIndicator size="large" />
</ScrollView>
);
}或更精确地限定为 null/undefined：
if (details == null) { // ✅ 安全宽松比较（null 和 undefined 均匹配）
// 渲染 loading
}⚠️ 注意事项：
- 避免使用 details !== undefined 或 details !== null 单独判断，易遗漏另一方；
- 不要使用 details === null（严格相等），因初始值虽为 null，但后续可能被设为 [] 或 {}，此时需根据业务逻辑决定是否视为“已加载”；
- 若 API 返回结构固定（如必含 results 数组），可进一步校验：!details || !Array.isArray(details)；
- console.log(details.adult) 应移至 if 分支内部（即确认 details 存在后再访问），否则仍会触发报错。
? 补充建议：提升健壮性，可在 CallApiProvider 中增加加载态管理：
// CallApiProvider.js
const [details, setDetails] = useState(null);
const [loading, setLoading] = useState(true); // 新增 loading 状态
useEffect(() => {
const fetchDetails = async () => {
setLoading(true);
try {
const { data } = await api.get("/trending/all/week?language=pt-BR");
setDetails(data.results.slice(0, 10));
} catch (err) {
console.error("API error:", err);
setDetails([]); // 或保持 null，按需设定 fallback
} finally {
setLoading(false);
}
};
fetchDetails();
}, []);
return (
<ApiContext.Provider value={{ details, loading }}>
{children}
</ApiContext.Provider>
);然后在 Search 中直接使用：
const { details, loading } = useContext(ApiContext);
if (loading) {
return <ActivityIndicator size="large" />;
}
if (!details) {
return <Text>No data available</Text>;
}
// 正常渲染这种显式状态分离（loading + details）比仅依赖 details 的真假值更清晰、更可控，是生产环境推荐的模式。
