React应用API数据访问出现undefined问题求助

你遇到的问题核心有两个：

1. 初始State类型不匹配：你把data的初始值设成了数组[]，但API返回的是包含count、results的对象。组件初始渲染时，data是数组，自然没有results和count属性，所以会输出undefined。
2. 嵌套数据访问未做安全校验：直接访问data.results[0].name这类嵌套属性时，只要results还没加载出来（或者是undefined），就会触发"Cannot read properties of undefined"错误。

1. 修正初始State #

把data的初始值改成匹配API结构的对象，避免初始渲染时属性不存在：

// 方案一：空对象
const [data, setData] = useState({});
// 方案二：带默认结构，提前给results设空数组，后续访问更安全
const [data, setData] = useState({ results: [] });

2. 安全访问嵌套数据 #

有两种常用方式避免报错：

• 可选链操作符?.：这是React中处理嵌套数据最简洁的方式，只要某个层级不存在，就会返回undefined而不是报错：

  // 访问count
  {data.count}
  // 安全访问第一个结果的name
  {data.results?.[0]?.name}
  

• 条件渲染：结合isLoading或直接判断数据存在性，确保有数据后再渲染：

  {!isLoading && data.results?.length > 0 && (
    <div>第一个人物：{data.results[0].name}</div>
  )}
  

3. 修改后的完整代码 #

import React, { useState, useEffect } from 'react';
import Search from '../Components/Search';
import '../App.css';

export default function People () {
    // 用带默认结构的初始State，确保results始终是数组
    const [data, setData] = useState({ results: [] });
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        fetch('https://swapi.dev/api/people')
        .then(res => res.json())
        .then(responseData => {
            setData(responseData);
            setIsLoading(false);
        })
        .catch(error => {
            console.log(error);
            setIsLoading(false); // 出错也要停止加载状态
        }); 
    }, [])
    
    console.log(data.results); // 初始输出空数组，请求完成后输出真实数据
    
    return (
        <React.Fragment>
            <div className="container-column">
                <div className="item">
                    <Search />
                </div>
                {isLoading ? (
                    <p>Wait I'm Loading data for you</p>
                ) : (
                    <div>
                        <p>总共有 {data.count} 条数据</p>
                        <p>第一个人物：{data.results?.[0]?.name}</p>
                        <ul>
                            {data.results.map((person, index) => (
                                <li key={index}>{person.name}</li>
                            ))}
                        </ul>
                    </div>
                )}
            </div>
        </React.Fragment>
    )
}

补充说明控制台的两次undefined #

这是因为React严格模式在开发环境下会触发两次渲染，用来检测副作用问题。初始两次渲染时data是你设置的初始值（数组或空对象），所以输出undefined；API请求完成后setData更新状态，组件第三次渲染时就能拿到正确的results数组。

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