React中API数据控制台可见但页面不显示问题排查

核心问题分析 #

1. state类型不匹配：初始useState([])设为数组，但API返回的是包含results数组的对象，执行setData(json)后data是对象，data.length为undefined，导致渲染条件data.length && ...不生效，map循环根本没执行。
2. map回调未返回元素：map里用大括号{}包裹逻辑，但没有显式return JSX元素，也没使用箭头函数的隐式返回语法，导致map返回全为undefined的数组，无法渲染内容。
3. 数据取值问题：item.titleText是对象，直接传给Card会显示[object Object]；item.primaryImage可能为null，直接取url会触发报错。

修正后的App组件代码 #

import { useState, useEffect } from "react";
import "./App.css";
import Card from "./Card";

function App() {
  // 初始state设为包含空results的对象，适配API返回结构
  const [data, setData] = useState({ results: [] });

  const url = 'https://moviesdatabase.p.rapidapi.com/titles';

  function fetchData() { 
    fetch(url, { 
      method: 'GET', 
      headers: {
        'X-RapidAPI-Key': '你的密钥',
        'X-RapidAPI-Host': 'moviesdatabase.p.rapidapi.com'
      }
    })
    .then((res) => res.json())
    .then((json) => {
      console.log(json);
      setData(json);
    })
    .catch(err => console.error(err)); // 新增错误捕获，排查请求异常
  };
  
  useEffect(() => {
    fetchData();
  }, [])

  return (
    <>
      My API <br/>
      <br />

      <div>
        {/* 用可选链判断results是否存在且有数据 */}
        {data.results?.length > 0 && data.results.map((item) => (
          // 箭头函数用小括号实现隐式返回JSX
          <div key={item.id}>
            <Card
              // 可选链处理primaryImage为null的情况
              image={item.primaryImage?.url}
              // 取titleText的text字段展示标题
              title={item.titleText?.text}
            />
          </div>
        ))}
      </div>
    </>
  )
}

export default App

优化后的Card组件代码 #

可以补充空值处理，避免图片或标题为空时显示异常：

import React from "react";

function Card(props) {
  // 图片为空时用占位图兜底
  const fallbackImage = "https://via.placeholder.com/150";
  return (
    <>
      <img src={props.image || fallbackImage} alt={props.title || "无标题"} />
      <p>{props.title || "无标题"}</p>
    </>
  )
}

export default Card

额外注意事项 #

• 必须给请求添加catch捕获错误，避免静默失败难以排查
• 对API返回的嵌套数据优先用可选链?.处理，防止某一层为null/undefined导致页面崩溃
• 如果map回调用大括号{}包裹逻辑，必须显式写return，示例：

  data.results.map((item) => {
    return (
      <div key={item.id}>...</div>
    )
  })
  

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