如何在react中过滤状态数组？

IT技术 reactjs filter redux
2021-05-05 22:07:48

我有订单减少器，它有很多状态。

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

我要过滤的是menu. menu是具有menu_itemI havecurrentCategoryId和对象的状态数组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;}}

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

我怎样才能做到这一点？

提前致谢。

4个回答

请使用以下filter功能：

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

PS：我同意下面的答案，最好使用 Immutable.js

我想说你可以为此使用 immutable.js。您可以添加filter到您的地图。

你可以尝试类似的东西

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

PS：我还没有测试过上面的代码，但它应该只需稍作修改即可。

您可以在此处查看有关不可变的更多信息

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

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

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

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

其它你可能感兴趣的问题
上一篇为什么自定义 css 类不适用于 React-Semantic-UI 元素？ 下一篇React Native fetch() 不工作