React Native 中正确判断 API 数据加载状态的条件渲染方法

在 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 的真假值更清晰、更可控，是生产环境推荐的模式。