TypeError：無效的解構不可迭代實例的嘗試。 為了可迭代，非數組對象必須有一個 [Symbol.iterator]()

Question

閱讀此問題的人您好。 我將 Vue 2 與 firebase 一起使用。 我想獲取包含對象的 Array 列表。 該列表從 firebase 實時數據庫中成功獲取，但問題是當我想將此數組存儲到 Vuex state 時出現此錯誤

TypeError：無效的解構不可迭代實例的嘗試。 為了可迭代，非數組對象必須有一個 Symbol.iterator

這是我從 firebase 實時數據庫中獲取數據的代碼

 getAllProject() {
    //var result = [];
    var userId = store.state.user.user.uid;
    var project_ref = database.ref("projects/" + userId + "/");
    project_ref.on("value", function(snapshot) {
      if (snapshot.hasChildren) {
        snapshot.forEach(function(DataSnapsho) {
          try {
            store.dispatch("projects/set_poject", DataSnapsho.val());
          } catch (error) {
            console.log(error);
          }
        });
      }
    });
  }

這是我的 Vuex 代碼 export const namespaced = true;

export const state = {
  test: []
};

export const mutations = {
  SET_PROJECT(state, paylod) {
    state.test.push(paylod);
  }
};

export const actions = {
  set_poject([commit], paylod) {
    commit("SET_PROJECT", paylod);
  }
};

這是我調用getAllProject方法的地方

     mounted() {
    read_project.getAllProject();
  },

output 錯誤是這樣的

TypeError: Invalid attempt to destructure non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.
    at _nonIterableRest (nonIterableRest.js?3d8c:2)
    at _slicedToArray (slicedToArray.js?3835:6)
    at Store.set_poject (projects.js?f817:296)
    at Array.wrappedActionHandler (vuex.esm.js?2f62:851)
    at Store.dispatch (vuex.esm.js?2f62:516)
    at Store.boundDispatch [as dispatch] (vuex.esm.js?2f62:406)
    at eval (readProject.js?72b9:18)
    at eval (index.esm.js?e947:4417)
    at LLRBNode.inorderTraversal (index.esm.js?e947:2769)
    at SortedMap.inorderTraversal (index.esm.js?e947:3219)

實際的數組是這個

Answer 1

問題在於您的這行代碼：

set_poject([commit], paylod) {
    commit("SET_PROJECT", paylod);
  }

實際上， commit在 object 內部，您不能將 object 解構為數組。 因此，當您嘗試這樣做時，它會給出錯誤解構不可迭代實例。

像這樣更新代碼：

set_poject({commit}, paylod) {
    commit("SET_PROJECT", paylod);
  }