0
votes

Accéder aux données via redux pour SectionList

J'ai un état initial comme ci-dessous dans le réducteur

<SectionList
                    renderItem={({item, index, section}) => <MedicineRow showTitle={0}  key={index} setWidth='80%' title={item.name} mg={item.mg} capsules={item.capsules} onPress={() => this.medicineRowTapped(item.name)} medstatus={item.isTaken}/>}
                    stickySectionHeadersEnabled={false}
                    renderSectionHeader={({section: {title}}) => (
                       <SectionTitle showTitle={true} title={title}/>
                    )}
                    sections={ 
                        this.props.filteredMedications.medications
                    }
                    keyExtractor={(item, index) => item + index}
                />

J'ai ma classe comme ci-dessous pour le React NativeSectionList.

function mapStateToProps(state) {
    return {
        filteredMedications : state.medicationschedule.filter((schedule)=>{ schedule.date === '2019-08-27' })
    }
}

La liste se charge avec succès si j'accède au médicament comme indiqué dans mapStateToProps . Mais si j'essaie de filtrer les données à l'intérieur de medictionschedule en fonction de la date, la sectionlist ne charge rien à l'écran.

Le filtrage dans une fonction externe n'aide pas non plus ici, comme indiqué ci-dessous.

<SectionList
    renderItem={({item, index, section}) => <MedicineRow showTitle={0}  key={index} setWidth='80%' title={item.name} mg={item.mg} capsules={item.capsules} onPress={() => this.medicineRowTapped(item.name)} medstatus={item.isTaken}/>}
    stickySectionHeadersEnabled={false}
    renderSectionHeader={({section: {title}}) => (
       <SectionTitle showTitle={true} title={title}/>
    )}
    sections={ 
        this.medicineForTheDate()
    }
    keyExtractor={(item, index) => item + index}
/>

puis dans la SectionList j'appellerais this.medicineForTheDate()

medicineForTheDate = () => {
    this.props.filteredMedications.filter((schedule) => {
        if (schedule.date === '2019-08-27') {
            return schedule.medications
        }
    })
}

react-native ecmascript-6 react-redux redux react-native-sectionlist

3 commentaires

Avez-vous vérifié que le filtre fonctionne correctement?

@JebinBenny oh mon dieu. Merci d'avoir sauvé ma journée. J'ai trouvé le problème après avoir vérifié le filtre.

Si vous rencontrez toujours des problèmes, veuillez ajouter des accessoires extraData à votre liste de sections.

3 Réponses :

1
votes

Essayez ceci!

medicineForTheDate() {
 let filteredValue = this.props.filteredMedications.filter((schedule) => {
    		    		if (schedule.date === '2019-08-27') {
    		        		return schedule.medications
    		    		}
    		     });
  return filteredValue;
}

0 commentaires

1
votes

Vous êtes proche mais vous avez quelques erreurs mineures dans chacune de vos approches.

Dans l'approche 1 avec la méthode externe, vous ne renvoyez pas une valeur de la méthode et filter ne fonctionne pas comme vous vous attendez. La méthode filter sur un tableau renverra un autre tableau contenant uniquement les éléments du tableau d'origine où la clause filter renvoie une valeur de vérité. Donc, dans votre exemple, même si vous retournez schedule.medications , vous vous retrouvez toujours avec un tableau avec les données d'origine. Le code le plus similaire à votre intention, je crois, est le suivant:

function mapStateToProps(state) {
    return {
        filteredMedications : state.medicationschedule.filter((schedule)=>{ return schedule.date === '2019-08-27' })[0]
    }
}

Cela dit, je pense qu'une boucle for est plus claire:

medicineForTheDate = () => {
    const {filteredMedications} = this.props;
    for (let i=0; i < filteredMedications.length; i++) {
      const schedule = filteredMedications[i];
      if (schedule.date === '2019-08-27') {
         return schedule.medications
      }
    }
    // decide if you want to return a different value if no match is found
}

Pour le second cas, vous avez des erreurs similaires - en utilisant le filtre de manière incorrecte et en ne renvoyant pas réellement une valeur du filtre. Encore une fois, quelque chose comme

medicineForTheDate = () => {
    const matchingMedications = this.props.filteredMedications.filter((schedule) => {
        return schedule.date === '2019-08-27'; // filter if dates are equal
    })
    if (matchingMedications.length) { // if we have a result
        return matchingMedications[0].medications;
    }
    // decide about a default value if there is no match
}

fonctionnera tant que vous tenez compte du fait que filteredMedications n'est pas défini dans votre composant dans ce cas s'il n'y a pas de correspondance pour la date .

0 commentaires

1
votes

Pour commencer, la méthode filter attend une fonction qui prend un paramètre (l'élément à l'intérieur du tableau) et renvoie un vrai (si l'élément doit être dans le tableau filtré) ou false (si l'élément ne doit PAS être dans le tableau filtré)

Par exemple:

const arr = [1, 2, 3, 4, 5];

const evenNumbersOnly = arr.filter((item) => {
  if (item % 2 === 0) {
    // Even (Want it in the list
    return true;
  } else {
    // Odd (Don't want it in the list
    return false;
  }
});

// evenNumbersOnly will now be [2, 4]

Essayez de changer votre méthode filter et voyez si le tableau filtré est ce que vous attendez. À partir de là, je pense que vous pourrez continuer le débogage s'il n'affiche toujours pas les résultats attendus.

0 commentaires