Question

如果数组尚未包含具有相同ID的某些对象，我想在数组中存储一些对象。无论如何，一切正常，直到我一次添加多个对象为止。

以下是使用Vuex的相关代码：

// filter function to check if element is allready inlcuded
function checkForDuplicate(val) {
    for( let sessionItem of state.sessionExercises ) {
        return sessionItem._id.includes(val._id);
    }
};

// related array from vuex state.js
sessionExercises: [],


// vuex mutation to store exercises to session exercises
storeSessionExercises: (state, payload) => {
    // Pre filtering exercises and prevent duplicated content
    if( checkForDuplicate(payload) === true ) {
        console.log("Exercise ist bereits für session registriert!");
    } else {
        state.sessionExercises.push(payload);
    }
},


// Related vuex action
storeSessionExercises: ({ commit }, payload) => {
    commit("storeSessionExercises", payload)
},

正如我之前写的那样，只要我有一个对象，一切就可以正常工作，checkForDuplicate（）将找到重复的对象并拒绝推送到数组。

现在有一种情况，我想通过数据库请求将一堆对象推送到数组，通过输出循环，提取对象，然后通过与我使用的相同的功能来推送它们单个对象：

// get user related exercises from database + clear vuex storage + push db-data into vuex storage
addSessionWorkout: ({ commit, dispatch }, payload) => {
    axios.post(payload.apiURL + "/exercises/workout", payload.data, { headers: { Authorization: "Bearer " + payload.token } })
    .then((result) => {
        // loop through output array and 
        for( let exercise of result.data.exercises ) {
            // push (unshift) new exercise creation to userExercises array of vuex storage
            dispatch("storeSessionExercises", exercise)
        };
    })
    .catch((error) => {
        console.error(error)
    });
},

推送也应该按其应有的方式工作，另一方面，“过滤器功能”没有起作用。它将过滤第一个对象并拒绝将其推入数组，但是如果还有第二个对象，即使已经包含相同的对象（相同ID），也将其推入数组，我在这里看不到什么！？让我发疯！：D

我理解它就像循环将每个对象放入checkForDuplicate（）并查看是否有重复对象应输出true，因此该对象不会被推入数组。如果有人看到了我目前所看到的，就不让我知道。

Answer 1

错误是您的过滤器功能。您想遍历sessionExercises并仅在其中任何一个匹配时返回true。但是，此刻，您将返回第一次检查的结果。您的循环始终只会运行一次。

选项1：仅在匹配时返回

function checkForDuplicate(val) {
    for( let sessionItem of state.sessionExercises ) {
        if (sessionItem._id.includes(val._id)) {
            return true;
        }
    }
    return false;
};

选项2：使用es6过滤器

storeSessionExercises: (state, payload) => {
    var exercises = state.sessionExercises.filter(ex => (ex._id.includes(payload._id)));
    if(exercises.length) {
        console.log("Exercise ist bereits für session registriert!");
    } else {
        state.sessionExercises.push(payload);
    }
}

Answer 2

我将更改addSessionWorkout操作，将使用旧条目和新条目创建一个新的演习数组，然后更新状态。

// related array from vuex state.js
sessionExercises: [],


// vuex mutation to store exercises to session exercises
storeSessionExercises: (state, payload) => {
    state.sessionExercises = payload;
},


// Related vuex action
storeSessionExercises: ({ commit }, payload) => {
    commit("storeSessionExercises", payload)
},


addSessionWorkout: async({
  commit,
  dispatch,
  state
}, payload) => {
  const result = await axios.post(payload.apiURL + "/exercises/workout", payload.data, {
    headers: {
      Authorization: "Bearer " + payload.token
    }
  })

  try {
    const newExercices = result.data.exercises.reduce((acc, nextItem) => {
      const foundExcercise = acc.find(session => session.id === nextItem.id)
      if (!foundExcercise) {
        return [...acc, nextItem]
      }
      return acc
    }, state.sessionExercises)
    dispatch("storeSessionExercises", foundExcercise)
  } catch (e) {
    console.error(error)
  }
},

Vue，Vuex，JavaScript：includes（）不能按预期工作

2 个答案: