web-dev-qa-db-fra.com

Comment puis-je filtrer tableau d'état dans réagir?

J'ai réducteur d'ordre, qui a beaucoup d'états.

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

Ce que je veux filtrer est menu. menu est un tableau d'état qui a des objets de menu_item J'ai currentCategoryId et currentSubcategoryId. Ce que je veux faire avec ces états, c'est qu'en utilisant currentCategoryId et currentSubcategoryId pour filtrer menu et mettre les états filtrés à currentMenu.

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

Donc pour faire ça j'ai fait du code comme ci-dessus. Même s'il renvoie une valeur filtrée, il affiche le même nombre de tableaux avec de nombreuses valeurs fausses. Je veux trouver d'autres approches pour le faire ..

Comment puis-je faire ceci? 

Merci d'avance.

4
D.R

Veuillez utiliser la fonction filter:

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

P.S: Je suis d’accord avec la réponse ci-dessous, il est préférable d’utiliser Immutable.js

5
Ilya Lyamkin

Je dirais que vous pouvez utiliser immutable.js à cette fin. Vous pouvez ajouter filter à votre carte. 

Vous pouvez essayer quelque chose comme 

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

P.S: J'ai testé le code ci-dessus mais il devrait fonctionner avec peu de modifications.

Vous pouvez en savoir plus sur immuable ici

2
Harkirat Saluja
onTodoClick(id){
      this.setState({items: this.state.items.filter(item => item.news_id == id )
      });
    }
1
Parth Navadiya