Sequelize查询返回字段访问报错：undefined is not an object (evaluating 'item.Attraction.Name')

后端Get接口代码 #

app.get('/attraction/:routeid', async(req,res)=>{
    let response = await attraction_routes.findAll({
        attributes: ['attractionId'],
        where:{routeid: req.params.routeid},
        raw: true,
        include: [{
            model: Attraction,
            required: true,
            attributes: ['Name','Desc','Address']
        }],
        order: [['id', 'ASC']]
    });
    res.json(response)
});

接口返回的JSON数据 #

[
   {
      "attractionId":1,
      "Attraction.Name":"Mirante Cerro Santa Lucia"
   },
   {
      "attractionId":2,
      "Attraction.Name":"Cajon del Maipo"
   }
]

前端渲染代码 #

function renderPost(item){
return(
  <View style={styles.card}>
    <Text style={styles.title}>
      {item.Attraction.Name}
    </Text>
  </View>
)
};

错误信息 #

undefined is not an object (evaluating 'item.Attraction.Name')

问题原因 #

后端查询时设置了raw: true，Sequelize会将关联模型的属性打平为Attraction.Name这种字符串形式的键，而非嵌套的Attraction对象。因此前端尝试访问item.Attraction.Name时，item.Attraction是undefined，自然会报错。

解决办法 #

办法1：修改后端查询（推荐）

移除raw: true配置，让Sequelize返回嵌套的对象结构，这样前端就能正常通过item.Attraction.Name访问属性：

app.get('/attraction/:routeid', async(req,res)=>{
    let response = await attraction_routes.findAll({
        attributes: ['attractionId'],
        where:{routeid: req.params.routeid},
        // 移除raw: true
        include: [{
            model: Attraction,
            required: true,
            attributes: ['Name','Desc','Address']
        }],
        order: [['id', 'ASC']]
    });
    res.json(response)
});

修改后接口返回的JSON结构变为：

[
   {
      "attractionId":1,
      "Attraction": {
          "Name":"Mirante Cerro Santa Lucia"
      }
   },
   {
      "attractionId":2,
      "Attraction": {
          "Name":"Cajon del Maipo"
      }
   }
]

办法2：前端直接访问扁平属性

如果不想改动后端，前端可以通过字符串键的方式直接访问打平后的属性：

function renderPost(item){
return(
  <View style={styles.card}>
    <Text style={styles.title}>
      {item["Attraction.Name"]}
    </Text>
  </View>
)
};

内容的提问来源于stack exchange，提问作者thiago.ramos208