在redux reducer中更改对象数组中键的值答案

【问题标题】：Change value of a key in array of objects in redux reducer在redux reducer中更改对象数组中键的值
【发布时间】：2018-09-06 15:36:57
【问题描述】：

我的数组是这样的：

var arrayObj = [{key1:'value1', key2:'value2'},{key1:'value1', key2:'value2'},{key1:'value1', key2:'value2'},{key1:'value1', key2:'value2'},{key1:'value1', key2:'value2'}];

我正在发送索引、键和值。

假设如果我将发送 (2, 'key2', 'hello') 那么reducer 将上面的数组更新为：

var arrayObj = [{key1:'value1', key2:'value2'},{key1:'value1', key2:'value2'},{key1:'value1', key2:'hello'},{key1:'value1', key2:'value2'},{key1:'value1', key2:'value2'}];

所有数据都在 action.payload 中。我尝试过这样的事情：

 return {
   ...state,
   arrayObj: [
    ...state.arrayObj.slice(0, action.payload.arrayObjIndex),
    ...state.arrayObj[action.payload.arrayObjIndex]: {
      ...state.arrayObj[action.payload.arrayObjIndex],
      [action.payload.key]: action.payload.value,
    },
    ...state.arrayObj.slice(action.payload.arrayObjIndex + 1),
   ],
  };

但是上面的那个不行。

【问题讨论】：

标签： reactjs ecmascript-6 react-redux

【解决方案1】：

代码问题 - 从您正在更新的对象中删除 ...，因为您需要传播数组（由切片返回），而不是对象。使用这个：

 return {
   ...state,
   arrayObj: [
    ...state.arrayObj.slice(0, action.payload.arrayObjIndex),
    {
      ...state.arrayObj[action.payload.arrayObjIndex],
      [action.payload.key]: action.payload.value,
    },
    ...state.arrayObj.slice(action.payload.arrayObjIndex + 1),
   ],
};

建议/其他可能的解决方案：

如果你知道索引，那么你可以直接更新对象，像这样

case "String" : {
  let arr = [...state.arrayObj]
  arr[index] = {...arr[index]}        // Object.assign({}, arr[index])
  arr[index][key] = value
  return {
    ...state,
    arrayObj: arr
  }
}

或者

case "String" : {
  let arr = [...state.arrayObj]
  arr[index] = {...arr[index], [key]: value}     // Object.assign({}, arr[index], {[key]: value})
  return {
    ...state,
    arrayObj: arr
  }
}

您也可以使用地图或findIndex，如果项目的索引未知，请检查此答案：

Update single value of array in redux reducer

【讨论】：

【解决方案2】：

你可以这样做：

let prevState = {...state};

prevState.arrayObj[action.payload.arrayObjIndex][action.payload.key] = action.payload.value;

return prevState;

【讨论】：