传递对象以在redux中更新数组中的一个字段

时间:2018-10-05 09:26:59

标签: javascript reactjs redux

我正在尝试将对象数据传递给操作,然后该操作应该更新处于redux状态的objcts数组中的一个字段。我找到了这个solution,它与我的问题非常相似,但我不太清楚如何将其应用于此处的情况。这是我的代码:

这是我的减速器:

const initialState = {
  plfrm: {
    plfrm_collection: plfrm_collection,
    comment_collection: comment_collection,
    selected: [
      // {
      //     plfrm_selected_key: null,
      //     plfrm_selected_name: '',
      //     like: null,
      //     comment_selected: null
      // } 
      /* this should be the body of the selected object */
    ]
  }
}
export default function PaymentInfoReducer(state = initialState, action) {
  switch (action.type) {
    case PAYMENT_INFO_PARAMS_CHANGES_PLFRM:
      return update(state, {
        plfrm: {
          ...state.plfrm,
          selected: {
            [action.id]: update(...state.plfrm.selected[action.id], {
              $push: action.data
            })
          },
        },
      })
    default:
      return state
  }
}

这是我的动作:

export function plfrmChange(id, data) {
    return {
        type: PAYMENT_INFO_PARAMS_CHANGES_PLFRM,
        id,
        data
    }
}

当我从组件传递它时,我会像这样:

plfrmChange = (key, field, value) => {
    if(this.isPlfrmSelected(key)){ //item ald selected, update the [field]
        console.log('found')
        this.props.plfrmChange(this.findSelectedPlfrmIndex(key), {
            [field]: value
        })
    } else { //item not selected yet, so add new [field]
        console.log('not found')
        if(this.props.plfrm.selected.length === 0){ //if no item in array yet, index will b 0
            this.props.plfrmChange(0, {
                [field]: value
            })
        } else { //otherwise index will equal to length of array
            this.props.plfrmChange(this.props.plfrm.selected.length, {
                [field]: value
            })
        }
    }
}

当我运行时出现此错误:

TypeError: Cannot convert undefined or null to object
 60 | return update(state, {
  61 |     plfrm: {
  62 |         ...state.plfrm,
> 63 |         selected: {
  64 |             [action.id]: update(...state.plfrm.selected[action.id], {$push: action.data})
  65 |         },
  66 |     }

我是新来的人,我知道我的代码很乱。道歉。

1 个答案:

答案 0 :(得分:0)

散布运算符(...)只能更新为对象或数组。

在您的初始状态,plfrm.selected是一个空数组。因此,当您首次尝试访问state.plfrm.selected[action.id]时,它将是undefined。由于您在第64行应用了散布运算符,因此出现了错误。您可以执行类似的操作来解决此问题。

...(state.plfrm.selected[action.id] || {})