对 redux 缩减器中的数组进行多次更新

Multiple updates to an array in a redux reducer

本文关键字：更新 数组 redux      更新时间：2023-09-26

我正在Redux存储上创建一个新操作。我有一个项目列表，这些项目都具有"overlayVis"的属性。我想将所有这些设置为 true，除了指定的 Id。 我目前的实现是

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;
每次迭代

都会覆盖上一次迭代，因此每次运行操作时只进行一次更改。 我试图使用"状态"和"返回Obj"而不是"...状态"，但它没有奏效。我已经很久没有在这里发帖了，但我没有想法了。

任何帮助将不胜感激！

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

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;  })
     ]
  };
相关文章：