React Native 中正确判断 API 数据加载状态的条件渲染方法-js教程-PHP中文网

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"></activityindicator></scrollview>
  );
}

或更精确地限定为 null/undefined：

if (details == null) { // ✅ 安全宽松比较（null 和 undefined 均匹配）
  // 渲染 loading
}

⚠️ 注意事项：

React 组件生成器

根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。

下载

避免使用 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"></activityindicator>;
}
if (!details) {
  return <text>No data available</text>;
}
// 正常渲染

这种显式状态分离（loading + details）比仅依赖 details 的真假值更清晰、更可控，是生产环境推荐的模式。