Question

我有一个减数，因此ACTION_ADD_PRODUCTS调用产品列表，ACTION_ADD_TO_CARD动作调用在卡中添加产品，而ACTION_REMOVE_FROM_CARD应该从卡中删除，但是我不知道如何使ACTION_REMOVE_FROM_CARD返回移除按钮中的项目应从卡阵列中移除；

const initialState = {
  products: [],
  card: []
}

export const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case ACTION_ADD_PRODUCTS:
      return {...state, 
        products: action.payload}
    case ACTION_ADD_TO_CARD:
      return {
        ...state,
        card: [...state.card,  action.payload]
      }
    case ACTION_REMOVE_FROM_CARD:         
      return {
        card: [...state.card,  action.payload]
      }
    default:
  }
  return state;
};

Answer 1

在删除项目时，您需要将其他信息传递给减速器，无论是项目的if (data != null && Array.isArray(data)) { var dataRow = []; for (var i = 0; i < data.length; i++) { var row = data[i]; for (var j = 0; j < columns.length; i++) { var column = columns[i]; dataRow.push(row[column].toString()); } } }还是项目的index。

如果是索引，则只需使用切片

id

否则，如果您传递ID，则可以使用过滤器

case ACTION_REMOVE_FROM_CARD:  
      const index = action.payload.index      
      return {
        ...state,
        card: [...state.card.slice(0, index), ...state.card.slice(index + 1)]
      }

P.S。同样不要忘记返回其他状态参数，而不仅仅是 case ACTION_REMOVE_FROM_CARD: const id = action.payload.id return { ...state, card: state.card.filter((card) => card.id !== id) }在对象中。

Answer 2

当要从reducer中的数组中删除项目时，我通常将一个索引作为actiin.payload传递，然后仅使用array.splice（index，1）删除该项目。就您而言：

case ACTION_REMOVE_FROM_CARD: 
    let newCard = Object.assign([], this.state.card)
    newCard.splice(action.payload, 1) 
    return { card: [...state.card, newCard] }

请记住action.payload将是您从组件操作传递的期望索引号。希望它能有所帮助。

Redux-从数组中删除项目

2 个答案: