React Native Expo カスタム コンポーネントを表示できません

Question

私は初心者なので、カスタム コンポーネントの 1 つは表示されるのに、もう 1 つは表示されない理由がわかりません。

ホーム画面:

React を 'react' からインポートします。
'react-native' から {View, Text} をインポートします。
import { SafeAreaView } から 'react-native-safe-area-context';
import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler';
import { DrawerActions } から '@react-navigation/native';
'@expo/vector-icons/Ionicons' から Ionicons をインポートします。

import { useGrid } from '../context/gridProvider'; // コンテキストプロバイダー

'../components/Exam' から Exam をインポートします。
'../components/クロック' からクロックをインポートします。

const ホーム = ({ナビゲーション}) => {

    const {checkedItems, setCheckedItmes} = useGrid()
    
    戻る （
      <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())}>
              <イオンアイコン name="menu" size={32} color="#333" />
            </TouchableOpacity>
          </表示>
          <Clock /> // 時計が表示されます
          <Exam /> // 検査リストは表示されません
        </ScrollView>
      </SafeAreaView>
    ）
  }

  デフォルトのホーム

をエクスポートします。

時計は表示されますが、試験は表示されません。

検査コンポーネント:

React を 'react' からインポートします。
{View、Text、StyleSheet} を 'react-native' からインポートします。
import { useGrid } から '../context/gridProvider';
'../data/trialData' から ExamData をインポートします。

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

    selectedItems.forEach((key) => {

        console.log(examData[key-1].title);
        
        戻る（

          <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>
          </表示>

        ）
    });
}

デフォルトの試験

をエクスポートします。

(注: 最初のオブジェクト ID は 0 ではなく 1 なので、キー値から 1 を減算します)

コンテキストを使用してグローバルな可用性を処理し、別の画面のリストからどの試験が選択されるかを決定します。

リストから検査を選択すると、console.log(examData[key-1].title); ステートメントは正しい情報を端末に出力します。それ以外の場合、アプリには何も表示されません。

リストがページから押し出されるのを防ぐために、時計コンポーネントを削除してみました。

私の何が間違っていたか知っている人はいますか...

Answer 1

関数 Exam は、forEach が未定義を返すため、常に未定義を返します。

解決策: forEach の代わりにマップを使用します。

リーリー