React Native Expo 사용자 정의 구성 요소를 표시할 수 없습니다

Question

저는 초보자인데 왜 내 맞춤 구성 요소 중 하나는 표시되고 다른 하나는 표시되지 않는지 알 수 없습니다.

홈 화면:

'react'에서 React를 가져옵니다.
'react-native'에서 {View, Text}를 가져옵니다.
'react-native-safe-area-context'에서 { SafeAreaView }를 가져옵니다.
import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler';
import { DrawerActions } from '@react-navigation/native';
'@expo/Vector-icons/Ionicons'에서 Ionicons를 가져옵니다.

import { useGrid } from '../context/gridProvider' // 컨텍스트 제공자

'../composites/Exam'에서 시험을 가져옵니다.
'../composites/clock'에서 시계를 가져옵니다.

const 홈 = ({탐색}) =>

    const {checkedItems, setCheckedItmes} = useGrid()
    
    반품 (
      <SafeAreaView 스타일={{flex:1}}>
        <ScrollView 스타일={{padding:20}}>
          <보기 스타일={{flexDirection: 'row', justifyContent: 'space-between', marginBottom:20,}}>
          <텍스트 스타일={{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>
          </보기>
          <시계 /> // 시계가 표시됩니다.
          <시험 /> // 시험 목록이 표시되지 않습니다.
        </ScrollView>
      </SafeAreaView>
    )
  }

  기본 홈 내보내기

시계는 표시되지만 시험은 표시되지 않습니다.

시험 구성요소:

'react'에서 React를 가져옵니다.
'react-native'에서 {View, Text, StyleSheet}를 가져옵니다.
import { useGrid } from '../context/gridProvider';
'../data/trialData'에서 ExamData를 가져옵니다.

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

    checkItems.forEach((key) => {

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

          <보기 스타일={{flex:1, alignItems: 'center', marginTop: 100, flexDirection: 'row'}}>
              <텍스트 스타일={{color: '#333'}}>{examData[key-1].title}</Text>
              <텍스트>{examData[key-1].startTime}</Text>
              <텍스트>{examData[key-1].endTime}</Text>
          </보기>

        )
    });
}

기본 시험 내보내기

(참고: 첫 번째 개체 ID는 0이 아닌 1이므로 키 값에서 1을 뺍니다.)

다른 화면의 목록에서 어떤 시험이 선택되는지 결정하기 위해 컨텍스트를 사용하여 글로벌 가용성을 처리합니다.

목록에서 시험을 선택하면 console.log(examData[key-1].title); 명령문은 다음을 제외하고 터미널에 올바른 정보를 출력합니다. 그렇지 않으면 애플리케이션에 아무것도 표시되지 않습니다.

목록이 페이지 밖으로 밀려나는 것을 방지하기 위해 시계 구성 요소를 제거해 보았습니다.

제가 뭘 잘못했는지 아시는 분 계시나요...

Answer 1

forEach가 정의되지 않은 값을 반환하기 때문에 Exam 함수는 항상 정의되지 않은 값을 반환합니다.

해결 방법: forEach 대신 맵을 사용하세요.

으아아아