当条件为真时，如何从 ReactJS Redux 状态的数组中删除元素？

Question

基本上我有一个包含项目行的表格。这些行有 4 个包含文本的单元格。您可以从右侧 -> 左侧的行中删除单元格/文本。因此，“1 2 3 4”可以是“1 2 3 -”，例如，如果您从右 -> 左删除单元格/文本。

这是我的 reducer 代码，我还必须删除整个行，因为上面示例中的“1”也被删除了。这只是为了让我不想让一行可见，例如“- - - -”，它可以在那时删除整行。所以这是我的代码：

case DELETE_SITE: {
      return {
        ...state,
        siteRows: state.siteRows.map((s) => {
          if (s.siteLevel2Id && s.siteLevel2Id == action.payload.id) 
            //return {...s, siteLevel2Id: null, siteLevel2Name: null, canDeleteLevel2: null};
            return state.siteRows.slice(0, 1);
          if (s.siteLevel3Id && s.siteLevel3Id == action.payload.id) 
            return {...s, siteLevel3Id: null, siteLevel3Name: null, canDeleteLevel3: null};
          if (s.siteLevel4Id && s.siteLevel4Id == action.payload.id) 
            return {...s, siteLevel4Id: null, siteLevel4Name: null, canDeleteLevel4: null};
          if (s.siteLevel5Id && s.siteLevel5Id == action.payload.id) 
            return {...s, siteLevel5Id: null, siteLevel5Name: null, canDeleteLevel5: null};
          return s;
         }),
      }
    }  

如您所见，只要删除3、2，仍然会填入1，看起来像这样“1 - - -”。现在如果我们也删除“1”，这里命名为“siteLevel2...”，它会显示“- - - -”，但我只想从“state.siteRows”中删除整行。

我现在已经尝试了注释中的行，但它只是将一个“null”值添加到“siteRows”数组中，如下所示：{null, [siteRow1]} 所以它在我的屏幕上崩溃，因为它正在尝试执行“null.id”之类的操作。

我已经尝试在第二行拼接数组中的第一个元素（删除它），但它似乎也不起作用。

谁能帮我解决这个问题？

Answer 1

您可以尝试以下方法：

const DELETE_SITE = 'DELETE_SITE';
const testReducer = (state, action) => {
  switch (action.type) {
    case DELETE_SITE: {
      const keys = [
        ['siteLevel2Id', 2],
        ['siteLevel3Id', 3],
        ['siteLevel4Id', 4],
        ['siteLevel5Id', 5],
      ];
      const reset = (num, item) => ({
        ...item,
        [`siteLevel${num}Id`]: null,
        [`siteLevel${num}Name`]: null,
        [`canDeleteLevel${num}`]: null,
      });
      const recurCheck = (id) => (row) => {
        const recur = (index) => {
          const [currentKey, num] = keys[index];
          //nothing to do, no match
          if (index >= keys.length - 1) {
            return row;
          }
          //row siteLevelNId matches id, reset this row
          if (row[currentKey] && row[currentKey] == id) {
            return reset(num, row);
          }
          //recur try the next index
          return recur(index + 1);
        };
        return recur(0);
      };
      return {
        ...state,
        siteRows: state.siteRows
          .map(recurCheck(action.payload?.id))
          //if any of these keys return true
          //  do not remove this row
          .filter((row) => keys.some(([key]) => row[key])),
      };
    }
    default: {
      return state;
    }
  }
};
console.log(
  'no rows',
  testReducer(
    { siteRows: [] },
    { type: DELETE_SITE, payload: { id: 1 } }
  ).siteRows
);
const createItem = (num) => ({
  [`siteLevel${num}Id`]: num,
  [`siteLevel${num}Name`]: num,
  [`canDeleteLevel${num}`]: num,
});
console.log(
  'id 3',
  testReducer(
    { siteRows: [createItem(3)] },
    { type: DELETE_SITE, payload: { id: 3 } }
  ).siteRows
);
console.log(
  'id 2',
  testReducer(
    { siteRows: [{ ...createItem(2), siteLevel3Id: 3 }] },
    { type: DELETE_SITE, payload: { id: 2 } }
  ).siteRows
);

我试图清理重复的逻辑，但你可以保持原样，解决你的问题的是 map 函数之后的 filter 函数。