選中復選框時將物件推送到陣列中，并在ReactJS中取消選中復選框時洗掉物件

我正在嘗試實作一個功能，當用戶檢查物件時，我想將物件推送到陣列中，如果用戶取消選擇它，則將其洗掉。我有一個選單，用于收集用戶選擇。我已經實作了代碼，但它沒有解決我的問題，有人可以幫助我如何解決這個問題。謝謝

  const selectSingle = (id, item, index) => {
    const user = Cookies.get("user") && JSON.parse(Cookies.get("user"));
    let callScheduleIds = Object.assign([], allCallNotifications);

    if (callScheduleIds.findIndex((item) => item.order_id === id)) {
      callScheduleIds.push({
        order_id: id,
        phone_number: item.phone1,
        sender_id: user.user.id,
      });
    } else {
      callScheduleIds.splice(callScheduleIds.indexOf(id), 1);
    }
    setAllCallNotifications(callScheduleIds);
  };

uj5u.com熱心網友回復：

而不是使用push為什么不使用id作為索引

const selectSingle = (id, item, index) => {
    const user = Cookies.get("user") && JSON.parse(Cookies.get("user"));

    let callScheduleIds = Object.assign([], allCallNotifications);
    let callScheduleByIds = callScheduleIds.createIdScheduleList();

    // The user has already selected this, so it makes sense this is where it gets deleted
    if (typeof(callScheduleByIds[id]) !== 'undefined') {
        callScheduleByIds = callScheduleByIds.removeScheduleByIndex(id);
    } 
    // The user has not yet picked this schedule, lets add it to the list
    else {
        callScheduleByIds[id] = {
            order_id: id,
            phone_number: item.phone1,
            sender_id: user.user.id,
        };
    };
    
    // In theory, this line will convert callScheduleByIds back to callScheduleIds
    setAllCallNotifications(callScheduleByIds.loopCallSchedules());
};

/**
* This function will find the scheduleIndex and delete it.
* @param integer scheduleIndex
* @return Array
*/
Array.prototype.removeScheduleByIndex = function(scheduleIndex) {
    let callScheduleIds = this;
    // Check that we have a scheduleIndex
    if (typeof(scheduleIndex) === 'undefined') {
        return callScheduleIds;
    };
    // Check if we even have scheduleIndex inside callScheduleIds
    if (typeof(callScheduleIds[scheduleIndex]) === 'undefined') {
        return callScheduleIds;
    };
    // The index of "scheduleIndex" exists in callScheduleIds, delete it?
    // Clear the previous scheduleItem (this will ensure there is not duplicate schedule).
    // If this section fails, you will get duplicate DATA
    if (typeof(scheduleIndex) === "number") {
        // This is our fail-safe, it will ensure scheduleIndex is removed
        delete callScheduleIds[scheduleIndex];
        // RE-INDEX our LIST, this will remove any UNDEFINED indexes
        callScheduleIds = callScheduleIds.createIdScheduleList();
    };
    // Success!
    return callScheduleIds;
};

/**
* This function will re-index the callSchedules into ID based list
* @param void
* @return Array
*/
Array.prototype.createIdScheduleList = function() {
    let callSchedules = this;
    let callScheduleKeys = Object.keys(callSchedules);
    let indexedScheduleList = [];
    for (let i = 0; i < callScheduleKeys.length; i  ) {
        var scheduleKey = callScheduleKeys[i];
        if (typeof(callSchedules[scheduleKey]) === 'undefined') {
            continue;
        };
        var scheduleValue = callSchedules[scheduleKey];
        indexedScheduleList[scheduleValue.order_id] = scheduleValue;
    };
    return indexedScheduleList;
};

/**
* This function will allow us to LOOP over the Call Schedules
* @param function callback
* @return Array
*/
Array.prototype.loopCallSchedules = function(callback) {
    let callSchedules = this;
    let callScheduleKeys = Object.keys(callSchedules);
    let isCallBack = Boolean(typeof(callback) === 'function');
    let normalScheduleList = [];
    for (let i = 0; i < callScheduleKeys.length; i  ) {
        var scheduleKey = callScheduleKeys[i];
        if (typeof(callSchedules[scheduleKey]) === 'undefined') {
            continue;
        }
        var scheduleValue = callSchedules[scheduleKey];
        var breakSchedule = undefined;
        if (isCallBack) {
            breakSchedule = callback(scheduleKey, scheduleValue);
        };
        if (typeof(breakSchedule) === 'undefined') {
            continue;
        } else if (!Boolean(breakSchedule)) {
            break;
        };
        normalScheduleList.push(scheduleValue);
    };
    return normalScheduleList;
};

您的主要問題是您的if/else順序錯誤

const selectSingle = (id, item, index) => {
    const user = Cookies.get("user") && JSON.parse(Cookies.get("user"));
    let callScheduleIds = Object.assign([], allCallNotifications);


    if (callScheduleIds.findIndex((item) => item.order_id === id) === -1) {
        callScheduleIds.push({
            order_id: id,
            phone_number: item.phone1,
            sender_id: user.user.id,
        });
    } else {
        callScheduleIds.splice(
            callScheduleIds.findIndex((item) => item.order_id === id),
            1
        );
    }
    setAllCallNotifications(callScheduleIds);
};
        

標籤：javascript 数组 反应 ecmascript-6 洛达什

上一篇：無法理解將二維陣列傳遞給方法并顯示

下一篇：在陣列公式中使用IMPORTRANGE、QUERY添加原始作業表名稱