Tidak dapat memaparkan komponen tersuai React Native Expo

Question

Saya seorang pemula dan tidak dapat mengetahui sebab salah satu komponen tersuai saya muncul tetapi yang lain tidak.

Skrin utama:

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

import { useGrid } daripada '../context/gridProvider'; // Penyedia konteks

import Peperiksaan daripada '../components/Exam';
import Jam daripada '../components/clock';

const Laman Utama = ({navigasi}) =>

    const {checkedItems, setCheckedItmes} = useGrid()
    
    kembali (
      <Gaya SafeAreaView={{flex:1}}>
        <ScrollView style={{padding:20}}>
          <Lihat gaya={{flexDirection: 'row', justifyContent: 'space-between', marginBottom:20,}}>
          <Gaya teks={{fontSaiz: 16, fontWeight: 700}}></Text>
            <Gaya teks={{fontSaiz: 32, fontWeight: 700, color:'#444'}}>Peperiksaan hari ini</Text>
            <TouchableOpacity onPress={() => navigation.dispatch(DrawerActions.openDrawer())}>
              <Ionicons name="menu" size={32} color="#333" />
            </TouchableOpacity>
          </Lihat>
          <Jam /> // Jam dipaparkan
          <Peperiksaan /> // Senarai peperiksaan tidak dipaparkan
        </ScrollView>
      </SafeAreaView>
    )
  }

  eksport lalai Laman Utama

Jam dipaparkan, tetapi peperiksaan tidak.

Komponen peperiksaan:

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

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

    checkedItems.forEach((kunci) => {

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

          
              {examData[key-1].title}
              {examData[key-1].startTime}
              {examData[key-1].endTime}
          

        )
    });
}

eksport Peperiksaan lalai
 (Nota: ID objek pertama saya ialah 1, bukan sifar, jadi tolak 1 daripada nilai kunci) 
Saya menggunakan konteks untuk mengendalikan ketersediaan global untuk menentukan peperiksaan yang dipilih daripada senarai pada skrin lain. 
Apabila anda memilih peperiksaan daripada senarai, console.log(examData[key-1].title); pernyataan mengeluarkan maklumat yang betul kepada terminal, kecuali untuk jam. Jika tidak, tiada apa yang dipaparkan dalam apl. 
Saya cuba mengalih keluar komponen jam untuk menghalangnya daripada menolak senarai keluar dari halaman. 
Adakah sesiapa tahu kesalahan saya...
            

Answer 1

Fungsi Exam sentiasa kembali undefined kerana forEach kembali undefined.

Penyelesaian: Gunakan peta dan bukannya 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