Django开发类推特项目点赞按钮显示undefined Likes问题求解

核心排查步骤 #

• 第一步：验证后端接口返回值
  直接在浏览器地址栏输入你前端调用的接口地址 /predictions，查看返回的JSON结构，确认response数组下的每一个对象是否都携带likes字段且为数字类型。你当前prediction_list_view里的代码逻辑是正确的，已经手动给每个返回对象加了随机likes值，大概率是缓存或者路由配置错误导致调用的不是你写的这个接口。
• 第二步：前端日志排查
  在前端JS的循环逻辑里增加打印语句，确认拿到的对象是否存在likes属性：

  for (i=0;i<listedItems.length; i++) {
      var predictionObj = listedItems[i]
      console.log('当前推文对象', predictionObj) // 新增这行，打开浏览器控制台查看输出
      var currentItem = formatPredictionElement(predictionObj)
      finalPredictionStr += currentItem
  }
  

  如果控制台打印的对象里没有likes字段，说明后端返回确实有问题；如果有likes字段但还是显示undefined，检查有没有拼写错误（比如字段名写成like、Likes大小写不匹配）。

额外注意事项 #

你当前的单条推文详情接口prediction_detail_view没有返回likes字段，后续如果调用详情接口展示内容也会出现同样的undefined问题，修改方法如下，在详情接口的try块中补充likes字段即可：

try:
    obj = Prediction.objects.get(id=prediction_id)
    data['content'] = obj.content
    data['likes'] = random.randint(0, 122) # 新增这行
except:
    data['message'] = "Not found"
    status = 404

内容的提问来源于stack exchange，提问作者Dev.Josh