Impossible d'afficher le composant personnalisé React Native Expo

Question

Je suis un débutant et je n'arrive pas à comprendre pourquoi l'un de mes composants personnalisés apparaît mais pas l'autre.

Écran d'accueil :

importer React depuis 'react';
importer {View, Text} depuis 'react-native' ;
importer { SafeAreaView } depuis 'react-native-safe-area-context' ;
importer { ScrollView, TouchableOpacity } depuis 'react-native-gesture-handler' ;
importer { DrawerActions } depuis '@react-navigation/native' ;
importer des Ionicons depuis '@expo/vector-icons/Ionicons' ;

import { useGrid } from '../context/gridProvider' ; // Fournisseur de contexte

importer l'examen depuis '../components/Exam' ;
importer l'horloge depuis '../components/clock' ;

const Accueil = ({navigation}) =>

    const {checkedItems, setCheckedItmes} = useGrid()
    
    retour (
      <SafeAreaView style={{flex:1}}>
        <Style ScrollView={{padding:20}}>
          <View style={{flexDirection : 'row', justifierContent : 'espace-entre', marginBottom:20,}}>
          <Style de texte={{fontSize : 16, fontWeight : 700}}></Text>
            <Text style={{fontSize : 32, fontWeight : 700, color:'#444'}}>L'examen d'aujourd'hui</Text>
            <TouchableOpacity onPress={() => navigation.dispatch(DrawerActions.openDrawer())}>
              <Ionicons name="menu" size={32} color="#333" />
            </TouchableOpacity>
          </Afficher>
          <Horloge /> // L'horloge est affichée
          <Exam /> // La liste des examens ne s'affiche pas
        </ScrollView>
      </SafeAreaView>
    )
  }

  exporter la page d'accueil par défaut

L’horloge est affichée, mais pas l’examen.

Composants de l'examen :

importer React depuis 'react';
importer {View, Text, StyleSheet} depuis 'react-native' ;
importer { useGrid } depuis '../context/gridProvider' ;
importer examData depuis '../data/trialData' ;

const Exam = () =>
  
  const {checkedItems, setCheckedItmes} = useGrid();

    checkItems.forEach((key) => {

        console.log(examData[key-1].title);
        
        retour(

          <View style={{flex:1, alignItems : 'center', marginTop : 100, flexDirection : 'row'}}>
              <Style de texte={{color : '#333'}}>{examData[key-1].title}</Text>
              <Texte>{examData[key-1].startTime}</Text>
              <Texte>{examData[key-1].endTime}</Text>
          </Afficher>

        )
    });
}

exporter l'examen par défaut

(Remarque : mon premier ID d'objet est 1, pas zéro, donc soustrayez 1 de la valeur clé)

J'utilise le contexte pour gérer la disponibilité globale afin de déterminer quels examens sont sélectionnés dans une liste sur un autre écran.

Lorsque vous sélectionnez un examen dans la liste, l'instruction console.log(examData[key-1].title); envoie les informations correctes au terminal, à l'exception du horloge. Sinon, rien ne s’affiche dans l’application.

J'ai essayé de supprimer le composant horloge pour l'empêcher de déplacer la liste hors de la page.

Est-ce que quelqu'un sait ce que j'ai fait de mal...

Answer 1

La fonction Exam renvoie toujours undéfini car forEach renvoie undéfini.

Solution : utilisez map au lieu de forEach.

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import { useGrid } from '../context/gridProvider';
import examData from '../data/trialData';

const Exam = () => {
  
  const {checkedItems, setCheckedItmes} = useGrid();

    checkedItems.map((key) => {

        console.log(examData[key-1].title);
        
        return(

          <View style={{flex:1, alignItems: 'center', marginTop: 100, flexDirection: 'row'}}>
              <Text style={{color: '#333'}}>{examData[key-1].title}</Text>
              <Text>{examData[key-1].startTime}</Text>
              <Text>{examData[key-1].endTime}</Text> 
          </View>  

        )
    });
}

export default Exam