PUT http://localhost:3000/events/undefined 404（未找到）

Question

此代碼通過獲取它的 id 來更新特定的 object。 當我將 id 硬編碼到 API cal 中時，沒有錯誤並且它工作得很好，但是當我將它從新參數中的組件獲取的 id 傳遞到“updateEvent”function 中時，它返回未定義的 id。 我認為問題出在我傳遞的參數中的 vuex 代碼內部

axios API 調用

updateEvent(id, event) {
        return apiClient.put(`/events/${id}`, event)
}

在 vuex 動作中

updateEvent({
      commit,
      dispatch
    }, {
      id,
      event
    }) {
      return EventService.updateEvent(id, event)
        .then(() => {
          commit('UPDATE_EVENT', event)
        })
    }

我像這樣在我的組件中發送它

methods: {
    updateEvent() {
      this.$store
        .dispatch("updateEvent", this.id, this.event)
        .then(() => {
          this.$router.push({
            name: "EventShow",
            params: { id: this.id },
          });
        })
        .catch(() => {});
    },
  }

Answer 1

您的操作從有效負載（第二個參數）中解包/解構id和event ，但您的調度未傳遞 object。 相反，它傳遞的是this.id - 大概是一個String ，它不包含名為id或event的屬性（因此， id在您的 URL 中解析為“未定義”）。

要解決此問題，您的調度應傳遞具有預期屬性的object ：

//this.$store.dispatch("updateEvent", this.id, this.event); // DON'T DO THIS
this.$store.dispatch("updateEvent", { id: this.id, event: this.event })