React中如何遍历MongoDB aggregate查询结果并访问嵌套字段

错误原因 #

• 前端组件首次渲染时，异步查询的postdata还未返回，初始值为空/undefined，此时访问嵌套层级的likedPost[0].post会触发空值读取错误
• map回调中复用了postdata作为参数名，和外层传入的数组变量名冲突，可能导致作用域取值异常
• 特殊场景下lookup可能返回空数组（比如关联的post数据被删除），此时likedPost[0]本身就是undefined

解决方法 #

方法1：使用可选链做空值防护（最便捷） #

直接在访问嵌套属性的位置加可选链操作符?.，任意层级为空时都会直接返回undefined，不会抛出运行错误，还可以配合空值合并运算符??设置默认值：

{postdata.map((item, i) => ( // 注意修改参数名避免和外层变量冲突
    <Card
        key={i}
        post={item.likedPost?.[0]?.post ?? '暂无内容'}
        // 其余属性
    />
))}

如果框架不支持可选链语法，可以换用逻辑与判断：

post={item.likedPost && item.likedPost[0] && item.likedPost[0].post || '暂无内容'}

方法2：渲染前先判断数据是否加载完成 #

在遍历数组前先校验数组长度，确保数据已经返回后再渲染组件：

{
  postdata && postdata.length > 0 
  ? postdata.map((item, i) => <Card key={i} post={item.likedPost[0].post} />)
  : <div>加载中...</div>
}

方法3：聚合阶段优化返回结构（根本解决） #

因为你的lookup是一对一关联，返回的数组只会有一个元素，可以直接在MongoDB聚合阶段把数组转成对象，避免前端每次都要取下标0的元素，降低出错概率：
修改你的pipeline，在末尾新增$addFields阶段：

const pipeline = [
    // 原有两个lookup和match阶段不变
    {
        '$lookup': {
            'from': 'posts',
            'localField': 'likedThing',
            'foreignField': 'id',
            'as': 'likedPost'
        }
    }, 
    {
        '$lookup': {
            'from': 'users',
            'localField': 'userId',
            'foreignField': 'id',
            'as': 'userData'
        }
    }, 
    {
        '$match': {
            'userId': userId
        }
    },
    // 新增以下阶段
    {
        '$addFields': {
            'likedPost': { '$first': '$likedPost' }, // 取数组第一个元素作为likedPost的值
            'userData': { '$first': '$userData' }
        }
    }
]

修改后前端可以直接访问对象属性，不需要写数组下标：

post={item.likedPost?.post ?? '暂无内容'}

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