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

【问题标题】：PUT http://localhost:3000/events/undefined 404 (Not Found)PUT http://localhost:3000/events/undefined 404（未找到）
【发布时间】：2020-05-13 22:51:42
【问题描述】：

此代码通过获取特定对象的 id 来更新它。当我将 id 硬编码到 API cal 中时，没有错误并且它工作得很好，但是当我将它从组件中获取的新参数中的 id 传递给“updateEvent”函数时，它返回未定义的 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(() => {});
    },
  }

【问题讨论】：

显示的 vuex 代码不是有效的 JavaScript。

标签： javascript api vuex

【解决方案1】：

您的操作 unpacks/destructures id 和 event 来自有效负载（第二个参数），但您的调度没有传递对象。相反，它传递了this.id——可能是String，它不包含名为id 或event 的属性（因此，id 在您的URL 中解析为“未定义”）。

为了解决这个问题，你的调度应该传递一个具有预期属性的对象：

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

【讨论】：