在 redux reducer 中对数组进行多次更新

Question

我正在 Redux 商店上创建一个新操作。 我有一个项目列表，它们都具有“overlayVis”的属性。除了指定的 ID，我想将所有这些设置为 true。我目前的实现是

case ITEM_OVERLAY_TOGGLE:
  // object to be updated and returned   
  var returnObj = state.data;

  state.data.map((item) => {
    if (item.id === action.id) {
      returnObj = Object.assign({}, ...state, {
        data: [
          ...state.data.slice(0, item.id),
          Object.assign({}, ...state.data[item.id], {overlayVis: false}),
          ...state.data.slice(item.id + 1)]
      });
    } else if (!item.overlayVis) {
      returnObj = Object.assign({}, ...state, {
        data: [
          ...state.data.slice(0, item.id),
          Object.assign({}, ...state.data[item.id], {overlayVis: true}),
          ...state.data.slice(item.id + 1)]
      });
    }
  });

  return returnObj;

每次迭代都会覆盖上一次迭代，因此每次运行操作时只进行一次更改。我试图使用“state”和“returnObj”而不是“...state”，但它没有奏效。好久没在这里发帖了，没啥想法。

任何帮助将不胜感激！

Answer 1

我认为您的地图功能可以更改为如下所示。我只能从这里猜测，但你能看看这是否有效吗？

Map 函数用于转换数组中的对象，您需要在 map 函数中返回一个值才能进行转换。转换后的值存储在一个名为 newData 的新数组中。那是在外面返回的。

case ITEM_OVERLAY_TOGGLE:
    var newData = state.data.map((item) => {
    if (item.id === action.id) {
      return  {
            ...item,
            overlayVis:false
        }
    } else {
        return {
              ...item,
              overlayVis : true
        }
    }
  });

 return {
    ...state,
    data: newData
  }

编辑：如果action.id也是数组的索引，试试这个

case ITEM_OVERLAY_TOGGLE:
  // object to be updated and returned   

  return {
     ...state,
     data : [
         ...state.data.slice(0,action.id).map(i=>{ i.overlayVis = true, return i;  }),
         state.data[action.id].overlayVis=false,
         ...state.data.slice(action.id+1).map(i=>{ i.overlayVis = true, return i;  })
     ]
  };