Die benutzerdefinierte React Native Expo-Komponente kann nicht angezeigt werden

Question

Ich bin ein Neuling und kann nicht herausfinden, warum eine meiner benutzerdefinierten Komponenten angezeigt wird, die andere jedoch nicht.

Startbildschirm:

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

import { useGrid } from '../context/gridProvider'; // Kontextanbieter

Prüfung aus „../components/Exam“ importieren;
Uhr aus '../components/clock' importieren;

const Home = ({navigation}) =>

    const {checkedItems, setCheckedItmes} = useGrid()
    
    zurückkehren (
      <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'}}>Heutige Prüfung</Text>
            <TouchableOpacity onPress={() => navigation.dispatch(DrawerActions.openDrawer())}>
              <Ionicons name="menu" size={32} color="#333" />
            </TouchableOpacity>
          </Anzeigen>
          <Uhr /> // Die Uhr wird angezeigt
          <Prüfung /> // Die Prüfungsliste wird nicht angezeigt
        </ScrollView>
      </SafeAreaView>
    )
  }

  Standard-Home

exportieren

Die Uhr wird angezeigt, die Prüfung jedoch nicht.

Prüfungsbestandteile:

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

const Prüfung = () =>
  
  const {checkedItems, setCheckedItmes} = useGrid();

    reviewedItems.forEach((key) => {

        console.log(examData[key-1].title);
        
        zurückkehren(

          <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>
          </Anzeigen>

        )
    });
}

Standardprüfung exportieren

(Hinweis: Meine erste Objekt-ID ist 1, nicht Null, also subtrahiere 1 vom Schlüsselwert)

Ich verwende den Kontext, um die globale Verfügbarkeit zu verwalten und zu bestimmen, welche Untersuchungen aus einer Liste auf einem anderen Bildschirm ausgewählt werden.

Wenn Sie eine Untersuchung aus der Liste auswählen, gibt die Anweisung console.log(examData[key-1].title); die korrekten Informationen an das Terminal aus, mit Ausnahme der Ansonsten wird in der App nichts angezeigt.

Ich habe versucht, die Uhrkomponente zu entfernen, um zu verhindern, dass sie die Liste von der Seite verschiebt.

Weiß jemand, was ich falsch gemacht habe...

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