<p>我是一个新手，无法弄清楚为什么我的一个自定义组件显示出来了，而另一个没有。</p> <p>主屏幕：</p> <pre class="brush:php;toolbar:false;">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}) =&gt; { const {checkedItems, setCheckedItmes} = useGrid() return ( &lt;SafeAreaView style={{flex:1}}&gt; &lt;ScrollView style={{padding:20}}&gt; &lt;View style={{flexDirection: 'row', justifyContent: 'space-between', marginBottom:20,}}&gt; &lt;Text style={{fontSize: 16, fontWeight: 700}}&gt;&lt;/Text&gt; &lt;Text style={{fontSize: 32, fontWeight: 700, color:'#444'}}&gt;今日考试&lt;/Text&gt; &lt;TouchableOpacity onPress={() =&gt; navigation.dispatch(DrawerActions.openDrawer())}&gt; &lt;Ionicons name="menu" size={32} color="#333" /&gt; &lt;/TouchableOpacity&gt; &lt;/View&gt; &lt;Clock /&gt; // 时钟显示出来了 &lt;Exam /&gt; // 考试列表没有显示出来 &lt;/ScrollView&gt; &lt;/SafeAreaView&gt; ) } export default Home</pre> <p>时钟显示出来了，但考试没有显示出来。</p> <p>考试组件：</p> <pre class="brush:php;toolbar:false;">import React from 'react'; import {View, Text, StyleSheet} from 'react-native'; import { useGrid } from '../context/gridProvider'; import examData from '../data/trialData'; const Exam = () =&gt; { const {checkedItems, setCheckedItmes} = useGrid(); checkedItems.forEach((key) =&gt; { console.log(examData[key-1].title); return( &lt;View style={{flex:1, alignItems: 'center', marginTop: 100, flexDirection: 'row'}}&gt; &lt;Text style={{color: '#333'}}&gt;{examData[key-1].title}&lt;/Text&gt; &lt;Text&gt;{examData[key-1].startTime}&lt;/Text&gt; &lt;Text&gt;{examData[key-1].endTime}&lt;/Text&gt; &lt;/View&gt; ) }); } export default Exam</pre> <p>（注意：我的第一个对象ID是1，而不是零，因此在键值上减1）</p> <p>我使用上下文来处理全局可用性，以确定从另一个屏幕的列表中选择了哪些考试。</p> <p>当您从列表中选择考试时，<code>console.log(examData[key-1].title);</code>语句确实将正确的信息输出到终端，但是除了时钟之外，应用程序中没有显示任何内容。</p> <p>我尝试删除时钟组件，以防它将列表推出页面。</p> <p>有人知道我做错了什么吗...</p>

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