React Native调用API返回空白？求正确获取API结果的方法

你的代码存在几个关键问题，导致无法正确获取API结果并渲染内容：

核心问题 #

• API函数未同步数据到状态：api函数仅打印了API返回结果，没有将数据更新到state中，页面没有可渲染的内容。
• useState初始化错误：useState(api)是把函数本身作为初始值，而非API返回的数据，完全不符合预期。
• useEffect无限循环：未添加依赖数组的useEffect会在每次组件渲染时重复调用API，导致性能问题且无法稳定获取数据。
• 响应解析方式错误：目标API返回JSON格式数据，使用response.text()无法解析为可用的对象结构。

修正后的代码 #

import { useState, useEffect } from 'react';

function BookComponent() {
  // 初始化状态，null代表未加载数据
  const [book, setBook] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchBook = async () => {
      try {
        const requestOptions = {
          method: 'GET',
          redirect: 'follow',
        };
        const response = await fetch('https://simple-books-api.glitch.me/books/2', requestOptions);
        if (!response.ok) {
          throw new Error(`请求失败: ${response.status}`);
        }
        // 解析JSON格式的响应数据
        const result = await response.json();
        // 将获取到的书籍数据更新到state
        setBook(result);
      } catch (err) {
        // 捕获并存储错误信息
        setError(err.message);
      } finally {
        // 无论请求成功或失败，结束加载状态
        setLoading(false);
      }
    };

    fetchBook();
    // 空依赖数组确保API仅在组件挂载时调用一次
  }, []);

  // 根据状态渲染不同内容，避免页面空白
  if (loading) return <div>加载中...</div>;
  if (error) return <div>出错了: {error}</div>;
  if (!book) return <div>未获取到数据</div>;

  // 渲染获取到的书籍详情
  return (
    <div className="book-card">
      <h2>{book.name}</h2>
      <p>作者: {book.author}</p>
      <p>类型: {book.type}</p>
      <p>价格: ${book.price}</p>
    </div>
  );
}

export default BookComponent;

关键改动说明 #

1. 异步函数处理请求：用async/await简化异步代码逻辑，方便捕获错误。
2. 添加状态反馈：新增loading和error状态，给用户明确的加载或错误提示，避免页面空白。
3. 正确解析响应：使用response.json()解析API返回的JSON数据，得到可直接使用的对象。
4. 更新状态触发渲染：通过setBook将API数据存入state，触发组件重新渲染展示内容。
5. 限制useEffect执行时机：空依赖数组确保API请求仅在组件首次挂载时执行一次。

内容的提问来源于stack exchange，提问作者Ahmad Rafi