React Native Expo自定义组件Exam不显示问题求助

核心问题 #

你的Exam组件没有返回任何JSX元素：

• forEach循环里的return只是回调函数的返回值，不会被组件作为渲染内容返回；
• 整个Exam函数没有顶层的return语句，所以组件渲染时输出为空。

另外，遍历生成列表元素时，必须给每个元素添加唯一的key属性，这是React的强制要求。

修复后的Exam组件代码 #

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} = useGrid();

  // 用map替代forEach，生成JSX数组并返回
  return (
    <View>
      {checkedItems.map((key) => {
        const exam = examData[key - 1];
        return(
          <View 
            key={key} // 添加唯一key
            style={{alignItems: 'center', marginTop: 20, flexDirection: 'row', gap: 10}}
          >
              <Text style={{color: '#333'}}>{exam.title}</Text>
              <Text>{exam.startTime}</Text>
              <Text>{exam.endTime}</Text> 
          </View>  
        )
      })}
    </View>
  )
}

export default Exam

额外优化点 #

• 把examData[key-1]提取为变量，避免重复访问，提升代码可读性；
• 调整了marginTop（从100改为20，避免元素间距过大），添加gap属性让文本之间有合理间距；
• 移除了未使用的setCheckedItmes变量，减少不必要的依赖。

内容的提问来源于stack exchange，提问作者Rick Spencer