React中Fetch JSON后数组user.category/top_media显示undefined的解决方法

核心问题分析 #

• 初始状态类型不匹配：你把user的初始状态设为数组[]，但API返回的是单个对象，导致组件首次渲染时user.category和user.top_media自然不存在，触发undefined报错。
• 异步请求未完成时直接访问属性：组件会在fetchUsers完成前先渲染，此时user还是初始值，直接调用.map()或访问[0].media_url会报错。

分步解决方案 #

1. 修正初始状态 #

把user的初始值改为空对象{}，和API返回的数据类型匹配：

const [user, setUser] = useState({});

2. 添加条件渲染/可选链保护 #

有两种简洁的方式避免未加载完成时的报错：

方式一：使用可选链操作符（?.）

直接在访问属性时添加保护，这是React 16.8+支持的语法：

return (
    <div className="infProfCard-container">
        <div className='infProfCard-info'>
            {/* 先判断category是否存在，再执行map，同时给列表项加key */}
            {user.category?.map(c => (
                <h4 key={c}>{c}</h4>
            ))}
        </div>

        <div style={{ display: 'flex', justifyContent: 'center' }}>
            {/* 逐层判断top_media、数组第一项是否存在，存在再渲染组件 */}
            {user.top_media?.[0]?.media_url && (
                <InstagramEmbed url={user.top_media[0].media_url} width={328} captioned />
            )}
        </div>
    </div>
)

方式二：加载完成前显示占位内容

如果希望数据加载完成前不渲染核心内容，可以加全局判断：

// 数据未加载完成时显示加载提示
if (!user.category || !user.top_media) {
    return <div>加载中...</div>;
}

return (
    <div className="infProfCard-container">
        <div className='infProfCard-info'>
            {user.category.map(c => (
                <h4 key={c}>{c}</h4>
            ))}
        </div>

        <div style={{ display: 'flex', justifyContent: 'center' }}>
            <InstagramEmbed url={user.top_media[0].media_url} width={328} captioned />
        </div>
    </div>
)

3. 额外优化：处理URL参数为空的情况 #

如果URL中influencer参数为空，fetch会请求错误地址，建议给请求加前置判断：

useEffect(() => {
  if (x) { // 仅当参数存在时发起请求
    fetchUsers();
  }
}, [x]); // 把x加入依赖数组，参数变化时自动重新请求

补充说明 #

你删除return里的HTML后console.log(response)能正常输出，是因为组件不再尝试访问未加载完成的属性，但请求本身是正常完成的。另外，列表项必须加key属性，这是React列表渲染的规范，能避免性能问题和控制台警告。

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