React fetch请求API数据刷新时读取overall属性报undefined错误

这个报错本质是React异步渲染时序问题，之前能正常运行纯属本地接口缓存命中快的偶发情况，代码本身从一开始就有隐患：

• 状态初始值不匹配：接口返回的是对象结构，你给playerData设置的初始值是空数组[]，组件首次挂载、fetch请求还没返回的时候，渲染逻辑直接访问playerData.userData.overall.rank，此时userData根本不存在，自然会报“读取undefined的overall属性”的错误。
• 按钮逻辑时序错误：点击按钮时你先触发fetch，紧接着立刻执行window.location.reload()，fetch是异步微任务，reload会直接打断未完成的请求、清空所有React前端状态，页面重载后又回到初始值渲染的状态，必然触发报错。
• 没有空值兜底：异步请求从发起到拿到结果需要时间，这段时间内组件会先用初始值完成至少一次渲染，直接访问深层嵌套属性没有任何防护，只要请求速度稍慢就会触发报错。

import { useState, useEffect } from 'react';

function Activities() {
    const name = "three-dawg";
    // 初始值改成和接口返回匹配的空对象，不要用空数组
    const [playerData, setPlayerData] = useState({});
    const [loading, setLoading] = useState(false);

    async function fetchPlayerData(playerName){
        setLoading(true);
        try {
            const res = await fetch(/* 替换为你实际的接口URL */);
            // 校验接口响应状态，避免异常返回炸渲染
            if (!res.ok) throw new Error('接口请求失败');
            const data = await res.json();
            setPlayerData(data);
        } catch (err) {
            console.error('获取玩家数据失败:', err);
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        fetchPlayerData(name);
    }, [name]);

    // 加载态兜底
    if (loading) return <div>数据加载中...</div>;

    return (
        <div>
            {/* 用可选链+空值合并做访问兜底，避免属性不存在时报错 */}
            Hello {playerData?._id ?? '未知玩家'}
            <button onClick={() => fetchPlayerData(name)}>
                加载玩家数据
            </button>
            <ul>
               <li>排名：{playerData?.userData?.overall?.rank ?? '暂无数据'}</li>
               <li>等级：{playerData?.userData?.overall?.level ?? '暂无数据'}</li>
               <li>经验值：{playerData?.userData?.overall?.xp ?? '暂无数据'}</li>
            </ul>
        </div>
    );
}

• 移除了冗余的页面刷新逻辑：React状态更新后会自动触发重渲染，手动调用reload只会清空状态、打断请求，完全没有存在的必要。
• 修正状态初始值：把useState([])改成useState({})，和接口返回的对象类型保持一致。
• 增加可选链?.做属性访问防护：访问嵌套属性时，只要任意层级的值不存在，就会短路返回undefined，不会再抛出类型错误；搭配空值合并运算符??给不存在的字段设置默认展示文案。
• 增加加载状态和异常捕获：请求过程中展示加载提示，接口报错时打印错误日志，不会出现白屏。
• 增加接口响应校验：请求返回非2xx状态时直接抛出错误，避免异常响应数据进入状态导致后续渲染出错。

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