如何在反应中过滤状态数组？

Posted 2023-02-27

【中文标题】如何在反应中过滤状态数组？

【英文标题】：How can I filter array of state in react?

【发布时间】：2017-05-31 05:08:21

【问题描述】：

我有 order reducer，它有很多状态。

const initialState = 
 channel: null,
 order: ,
 fetching:true,
 menu: [],
 categories: [],
 subcategories: [],
 currentCategoryId: 1,
 currentSubcategoryId: 5,
 currentMenu: [],
;

我要过滤的是menu。 menu 是状态数组，其对象为 menu_item 我有 currentCategoryId 和 currentSubcategoryId。我想对这些状态做的是通过使用currentCategoryId 和currentSubcategoryId 过滤menu 并将过滤后的状态放入currentMenu。

case Constants.ORDER_CHANNEL_CONNECTED:
 return
  ...state,currentMenu: action.menu.map((menu) => 
                    if(state.currentCategoryId == menu.category_id)
                        return menu;
                    
                    else return false;

为此，我编写了上面的代码。即使它返回一些过滤值，它也会显示相同数量的具有许多错误值的数组。我想找到其他方法来做到这一点..

我该怎么做？

提前致谢。

【参考方案1】：

请使用filter函数：

...state,currentMenu: action.menu.filter((menu) =>
state.currentCategoryId == menu.category_id)

P.S：我同意下面的回答，最好使用 Immutable.js

【讨论】：

为什么你认为使用 Immutable.js 更好？与仅使用 filter 函数相比有什么好处吗？

使用不可变的主要原因是避免昂贵的克隆整个对象。不可变对象存储与以前版本的唯一区别。它的工作速度更快，尤其是在具有大状态对象的大型项目中。你可以阅读更多关于福利here

【参考方案2】：

我会说您可以为此目的使用 immutable.js。您可以将filter 添加到您的地图中。

你可以试试

Immutable.map(state.menu).filter(state.currentCategoryId===menu.category_id)

P.S：我还没有测试过上面的代码，但只要稍加修改它就可以工作。

您可以查看有关不可变here的更多信息

【讨论】：

谢谢，我尝试了currentMenu: Immutable.map(state.menu).filter(state.currentCategoryId===menu.category_id)，但它触发了Immutable.map is not defined 的错误。所以我尝试了Immutable.Map(state.menu)....，但它仍然触发了menu is not defined 的错误我应该如何更改？

【参考方案3】：

onTodoClick(id)
      this.setState(items: this.state.items.filter(item => item.news_id == id )
      );
    

【参考方案4】：

如果您按 ID 过滤并且它是数字，请注意比较字符串和数字。我不得不使用 parseInt （如下）。

Arr.filter(single => parseInt(single.id) !== parseInt(id))

如果 javascript 过滤器数组不起作用，请考虑这一点