未捕获(承诺)类型错误：无法读取未定义的属性'map' - 尽管在页面重新加载后仍会添加到 API？

Question

我正在尝试使用表单来创建一个基本卡。从表单中输入数据后，它应该创建"卡片"。并立即呈现数据。但是，有两件事:

1. 它只在重新加载页面后渲染
2. 在标题中抛出错误:

Uncaught (in promise) TypeError: Cannot read property 'map' of undefined

这是表单的事件监听器。

const api = new API()
const form = document.getElementById("newDrinkForm")
form.addEventListener("submit", (event) => {
event.preventDefault()
const name = event.target.name.value
const caffeine = event.target.caffeine.value
const ul = document.querySelector("ul")
api.addDrink(name, caffeine)
.then(drink => {
name.value = ""
caffeine.value = ""
const newDrink = new Drink(drink)
ul.append(newDrink)
console.log(newDrink)
})
})

这是一个饮料类

class Drink {
constructor(data) {
// Assign Attributes //
this.id = data.id
this.name = data.name
this.caffeine = data.caffeine
// Build Comment Dependents //
const comments = data.comments.map(comment => new Comment(comment, this))
// Build Associated Drink Card //
this.card = new DrinkCard(this, comments)
}

delete = () => {
api.deleteDrink(this.id)
delete this
}
}

addDrink功能:

addDrink(name, caffeine) {
const drink = {
name: name,
caffeine: caffeine,
}
return fetch(this.drinkURL, {
method: "POST",
headers: this.headers,
body: JSON.stringify(drink)
}).then(this.parseJSON)
.catch(this.catchError)
}

JSON of drinks

[
{
id: 26,
name: "Coffee",
caffeine: "80mg",
comments: [
{
id: 8,
summary: "test",
drink_id: 26,
created_at: "2021-02-02T02:13:15.190Z",
updated_at: "2021-02-02T02:13:15.190Z"
}
]
}
]

我知道这里收到了错误:

const comments = data.comments.map(comment => new Comment(comment, this))

有什么想法可以帮助我理清问题是什么吗?是因为它试图创建一个空数组以便将其映射到new Comment吗?如果是这样，有什么办法解决这个问题吗?

Answer 1

comments是响应对象drinks中的undefined，执行console.log(drinks)验证并检查api.addDrink方法查看原因