React子组件传入的user prop访问属性提示undefined报错问题求助

问题根因 #

你控制台打印的user实际是整个用户数组对象，并非你预期的单个用户对象，数组本身不存在name/username这类属性，所以渲染时会抛出undefined错误。
你看到console.log能正常输出内容，是因为浏览器控制台打印引用类型时是懒加载的：打印时只是存了对象的引用，你手动展开时才会读取最新的对象值，掩盖了初始渲染时数据未正确赋值的问题。

解决步骤 #

1. 临时规避报错：给所有调用user属性的位置加上可选链操作符，避免初始渲染阶段数据未加载完成导致的报错：

const Card = ({user}) => {
    console.log(user)
    return (
        <div className="card">
            <div className="break" />
                <div className="section">
                    <div className="user-info">
                        <img className="user-profile" alt="avatar" src={user?.avatar} width={'100%'} />
                        <div>
                            <div className="section">
                                <h3 className="bold">{user?.username}</h3>
                                <p className="username">{user?.name}</p>
                            </div>
                            <p>{user?.caption}</p>
                        </div>
                    </div>
                </div>
        </div>
    )
};

2. 排查descendingUsers的赋值逻辑
   你大概率在从Astra Database拉取数据后，对返回结果做了错误的结构解析：

• 检查返回结果是不是外层多包了一层对象，比如接口返回格式为{ data: [用户列表] }，你需要提取res.data赋值给descendingUsers，而非直接把整个返回结果赋值
• 检查是不是不小心把用户列表多套了一层数组，导致descendingUsers变成二维数组，map遍历后拿到的descendingUser依旧是数组，而非单个用户对象

3. 增加列表渲染前的校验
   在渲染Card列表前先判断descendingUsers是有效数组，避免非数组类型调用map方法报错：

{Array.isArray(descendingUsers) && descendingUsers.map((descendingUser, index) => (
    <Card 
        key={index}
        user={descendingUser}
    />
))}

内容的提问来源于stack exchange，提问作者axl.dev