無法顯示React Native Expo自訂元件

Question

我是一個新手，無法弄清楚為什麼我的一個自訂元件顯示出來了，而另一個沒有。

主畫面：

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

import { useGrid } from '../context/gridProvider'; // 上下文提供者

import Exam from '../components/Exam';
import Clock from '../components/clock';

const Home = ({navigation}) => {

    const {checkedItems, setCheckedItmes} = useGrid()
    
    return (
      <SafeAreaView style={{flex:1}}>
        <ScrollView style={{padding:20}}>
          <View style={{flexDirection: 'row', justifyContent: 'space-between', marginBottom:20,}}>
          <Text style={{fontSize: 16, fontWeight: 700}}></Text>
            <Text style={{fontSize: 32, fontWeight: 700, color:'#444'}}>今日考試</Text>
            <TouchableOpacity onPress={() => navigation.dispatch(DrawerActions.openDrawer())}>
              <Ionicons name="menu" size={32} color="#333" />
            </TouchableOpacity>
          </View>
          <Clock /> // 時鐘顯示出來了
          <Exam /> // 考試清單沒有顯示出來
        </ScrollView>
      </SafeAreaView>
    )
  }

  export default Home

時鐘顯示出來了，但考試沒有顯示出來。

考試組件：

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.forEach((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

（注意：我的第一個物件ID是1，而不是零，因此在鍵值上減1）

我使用上下文來處理全域可用性，以確定從另一個畫面的清單中選擇了哪些考試。

當您從清單中選擇考試時，console.log(examData[key-1].title);語句確實將正確的資訊輸出到終端，但是除了時鐘之外，應用程式中沒有顯示任何內容。

我嘗試刪除時鐘元件，以防它將清單推出頁面。

有人知道我做錯了什麼嗎...

Answer 1

函數Exam總是回傳undefined，原因是forEach回傳undefined。

解決方法：使用map而不是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