Vue, Vuex, JavaScript: includes()가 예상대로 작동하지 않음

Vue, Vuex, JavaScript: includes()가 예상대로 작동하지 않음

배열에 동일한 ID를 가진 개체가 아직 포함되지 않은 경우 배열 내에 개체를 저장합니다.한 번에 여러 개체를 추가할 때까지 모든 것이 잘 작동합니다.

Vuex를 사용한 관련 코드는 다음과 같습니다.

// filter function to check if element is already included
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)
},

1개의 오브젝트를 추가하면 모든 것이 정상적으로 동작하기 전에 썼듯이 check For Duplicate()는 중복된 오브젝트를 검출하여 어레이로의 푸시를 거부합니다.

데이터베이스 요청을 통해 개체의 번들을 어레이에 푸시하고 출력을 루프하여 개체를 추출하고 단일 개체와 동일한 기능을 통해 푸시하는 경우가 있습니다.

// 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

루프에 의해 각 객체가 check For Duplicate()를 통과하고 중복된 객체가 있으면 true로 출력되므로 객체가 배열에 푸시되지 않습니다.내가 지금 보고 있는 걸 누가 보면 그냥 알려주지 마.

실수는 필터 기능입니다.루핑하고 싶다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);
    }
}

제가 바꿀게요.addSessionWorkoutaction, 이전 엔트리와 새 엔트리를 사용하여 새 연습 배열을 만든 후 상태를 업데이트합니다.

// 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)
  }
},

언급URL : https://stackoverflow.com/questions/57043599/vue-vuex-javascript-includes-does-not-work-as-expected