如何在 ReactJs Redux 中删除/设置状态数组的“null”嵌套属性？

Posted 2023-02-19

【中文标题】如何在 ReactJs Redux 中删除/设置状态数组的“null”嵌套属性？

【英文标题】：How to delete/set "null" nested property of state array in ReactJs Redux?

【发布时间】：2021-06-07 12:33:14

【问题描述】：

例如，我有一个网站（位置，而不是网站）。在此之下，还有 4 个规范的“级别”。例如 lvl 1 - 2 - 3 - 4 可以是“USA - New York - ***lyn - streetX”或“CompanyA - buildingA - floorC - roomNumber”。

我必须能够删除“最低”规范级别。因此，如果您想删除 roomNumber，因为您将项目移动到另一个房间、楼层等......只有“roomNumber”应该被删除，但“CompanyA - buildingA - floorC”应该仍然存在于状态中。

我的 API 将返回最后一个“级别”，因此与“房间号”相关联的任何内容的记录（带有 ID）。所以，我有要删除的 ID。

这就是我的状态：

例如，我想删除“lvl4test”级别。后端明智的我只是发送 ID，它会删除记录，并且在页面刷新（强制 F5）时它会意识到这个级别已经消失。但是现在在我的减速机中我不知道该怎么做。

这是我的减速器：

case DELETE_SITE: 
      console.log("delete site reducer reached");
      return 
        ...state,
        // somehow makes all "siteRows" == "undefined"
        siteRows: state.siteRows.map((s) => 
          if (s.siteLevel2Id && s.siteLevel2Id == action.payload.id) 
            s.siteLevel2Id = null;
          if (s.siteLevel3Id && s.siteLevel3Id == action.payload.id) 
            s.siteLevel3Id = null;
          if (s.siteLevel4Id && s.siteLevel4Id == action.payload.id) 
            s.siteLevel4Id = null;
          if (s.siteLevel5Id && s.siteLevel5Id == action.payload.id) 
            s.siteLevel5Id = null;
         )
      
    

如果我这样做，当 React 尝试刷新时，它会使所有“siteRows”成为“未定义”吗？ 我不知道我是否应该使用“过滤器”，但不知道如何在嵌套对象/foreach 对象上这样做，然后过滤它们的属性等...

基本上，我想要的只是“siteLevel4Name”和“siteLevel4Id”也为“null”，然后反应刷新状态和我的网页。有人知道怎么做吗？

编辑：在“action.payload”中，我得到了要删除的项目，因此用于删除“lvl4test”的“action.payload.id”将是“d117c1f6-...”

【参考方案1】：

.map 必须返回值，而不仅仅是修改它。你什么都不返回，因此是未定义的。在映射函数结束时，您应该返回新的 s 值。

function reducer(state, action) 
  return 
    ...state,
    siteRows: state.siteRows.map((s) => 
      if (s.siteLevel2Id && s.siteLevel2Id == action.payload.id)
        return  ...s, siteLevel2Id: null ;
      if (s.siteLevel3Id && s.siteLevel3Id == action.payload.id)
        return  ...s, siteLevel3Id: null ;
      if (s.siteLevel4Id && s.siteLevel4Id == action.payload.id)
        return  ...s, siteLevel4Id: null ;
      if (s.siteLevel5Id && s.siteLevel5Id == action.payload.id)
        return  ...s, siteLevel5Id: null ;
      return s;
    ),
  ;