Question

所以我目前有以下代码。如果操作处于活动状态，则会将活动类型存储在名为SelectedActivityType的数组中。但是，如果操作未激活，我现在正尝试删除活动类型。

任何想法：

const initialUserState = {
  selectedActivityType: [],
}

export const activityTypes = (state = selectedActivityType, action) => {
  switch (action.type) {
  case types.DIARY_UPDATE_ACTIVITY_TYPE:
    if(action.active) {
      return {
        ...state,
        selectedActivityType: [...state.selectedActivityType, action.activityTypeId],
      }
    } else {
      return {
        ...state,

      }
    }
  default: return state
  }
}

Answer 1

我已将您的代码放在此处并对其进行了修改，以便在代码段示例中使用。

下面的代码片段将说明问题。即使已存在，当前设置也会将值推入阵列。这意味着您在Array中没有唯一值。运行下面的代码段，您将看到重复的条目。

＆＃13;

let STATE = {
  selectedActivityType: [ ]
};

const activityTypes = (state = selectedActivityType, action) => {
  switch (action.type) {
    case "UPDATE_ACTIVITY_TYPE":
      return {
       ...state,
        selectedActivityType: [...state.selectedActivityType, action.activityTypeId]
      }
    default: return state
    }
}

const addSelectedActivityType = (activityTypeId) => {
  return {
    type: "UPDATE_ACTIVITY_TYPE",
    activityTypeId
  }
};

STATE = activityTypes(STATE, addSelectedActivityType("testID"));
STATE = activityTypes(STATE, addSelectedActivityType("testID"));

console.log(STATE);

＆＃13;

我们可以做的是制作一个我们将在减速机中使用的辅助功能。如果您运行以下代码段，即使我们尝试添加两次相同的值，您也会看到，最终结果只有一个条目。

＆＃13;

let STATE = {
  selectedActivityType: [ ]
};

const activityTypes = (state = selectedActivityType, action) => {
  switch (action.type) {
    case "UPDATE_ACTIVITY_TYPE":
    
      if ( !existsInArray(
            state.selectedActivityType,
            action.activityTypeId
         ) ) {
           return {
           ...state,
            selectedActivityType: [...state.selectedActivityType, action.activityTypeId]
          }
         } else {
           return state;
         }
    default: return state
    }
}

const addSelectedActivityType = (activityTypeId) => {
  return {
    type: "UPDATE_ACTIVITY_TYPE",
    activityTypeId
  }
};

STATE = activityTypes(STATE, addSelectedActivityType("testID"));
STATE = activityTypes(STATE, addSelectedActivityType("testID"));

console.log(STATE);

// helper function

function existsInArray( array, value ) {
  let i;
  const length = array.length;
  for ( i = 0; i < length; i++ ) {
    if ( array[ i ] === value ) return true;
  }
  return false;
}

＆＃13;

现在我们知道数组中的条目是唯一的，我们可以使用另一个辅助函数轻松地从数组中删除条目。查看下面的片段以获得要点！

＆＃13;

let STATE = {
  selectedActivityType: [ "testID", "anotherID" ]
};

const activityTypes = (state = selectedActivityType, action) => {
  switch (action.type) {
    case "REMOVE_ACTIVITY_TYPE":
      removeFromArray(
        state.selectedActivityType,
        action.activityTypeId
      );
      
      return state;
    default: return state
    }
}

const removeSelectedActivityType = (activityTypeId) => {
  return {
    type: "REMOVE_ACTIVITY_TYPE",
    activityTypeId
  }
};

console.log( STATE );

STATE = activityTypes(STATE, removeSelectedActivityType("testID"));

console.log(STATE);

// helper functions

function existsInArray( array, value ) {
  let i;
  const length = array.length;
  for ( i = 0; i < length; i++ ) {
    if ( array[ i ] === value ) return true;
  }
  return false;
}

function removeFromArray( array, value ) {
  let index = array.indexOf( value );

  if ( index > -1 ) {
    array.splice( index, 1 );
  }
}

＆＃13;

希望这会有所帮助。如果需要，可以提出问题。

从Reducer中的数组中删除值

1 个答案: