React中用户头像访问异常：console.log(user.avatar)返回undefined

核心问题原因 #

你当前的代码逻辑存在本质错误：

• 初始userData设为数组，但实际要存储的是单个用户对象，并非数组集合
• 使用Object.values(userData).map()会把用户对象的所有属性值拆成数组（比如用户对象{_id: '123', avatar: 'xxx.jpg', name: 'test'}会被转成['123', 'xxx.jpg', 'test']）
• 循环里的user其实是单个属性值（比如头像URL、ID字符串），不是完整的用户对象，所以user.avatar自然返回undefined；而console.log(user)输出的只是某个属性的值，看起来像正常内容，但本质不是对象

修正后的代码 #

import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { useSelector } from 'react-redux';
import Avatar from '../Avatar';

const Info = () => {
  const { id } = useParams()
  const { auth } = useSelector(state => state)
  
  // 初始值设为null，匹配单个用户对象的存储类型
  const [userData, setUserData] = useState(null)

  useEffect(() => {
    if(id === auth.user._id){
      setUserData(auth.user)
    }
  }, [id, auth.user])
  
  // 先判断userData是否存在，避免初始渲染空值报错
  if(!userData) return <div>加载中...</div>

  return (
    <div className='info'>
      <div className="info_container" key={userData._id}>
        <Avatar src={userData.avatar} size="supper-avatar"/>
        {/* 现在可正常访问userData.avatar，console.log(userData)能看到完整用户对象 */}
      </div>
    </div>
  )
}

export default Info

关键修改点 #

• 将userData初始状态从数组[]改为null，匹配实际存储的单个用户对象类型
• 移除不必要的Object.values和map循环，直接渲染单个用户信息
• 添加userData存在性判断，避免初始渲染阶段的空值报错

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