React Native Expo报错：props.text未定义及main未注册求助

错误原因分析 #

1. TypeError: undefined is not an object (evaluating 'props.text') #

• 核心问题：GoalItem组件导出时错误调用了组件（export default GoalItem();），导致导出的是组件执行后的结果而非组件本身。执行时未传入props，因此props为undefined，访问props.text触发错误。
• 次要问题：样式名称拼写错误，goalTExt应为goalText，会导致文本样式不生效。

2. Invariant Violation: "main" has not been registered #

该错误由组件导出错误引发，metro无法正确识别并注册入口组件，导致应用启动失败。

修复步骤及修正后代码 #

1. 修正GoalItem组件（components/GoalItem.js） #

import {StyleSheet, Text, View} from "react-native";

function GoalItem(props){
    return(
        <View style={styles.goalItem}>
            <Text style={styles.goalText}>
                {props.text}
            </Text>
        </View>
    )
}

const styles = StyleSheet.create({
    goalItem:{
        margin:8,
        padding:8,
        borderRadius: 6,
        backgroundColor:'#5e0acc',
    },
    goalText:{
        color:'white'
    }
})
// 导出组件本身，而非执行后的结果
export default GoalItem;

2. 修正App.js中的两处问题 #

import { StatusBar } from 'expo-status-bar';
import {StyleSheet, Text, View, Button, TextInput, ScrollView, FlatList} from 'react-native';
import {useState} from "react";
import GoalItem from "./components/GoalItem";

export default function App() {
  const [enteredGoalText, setEnteredGoalText] = useState('')
  // 修正useState的setter函数名拼写错误：serCourseGoals → setCourseGoals
  const [courseGoal, setCourseGoals]= useState([])
  
  function goalInputHandeller(enteredText){
    setEnteredGoalText(enteredText)
  }

  function addGoalHandeller(){
    console.log(enteredGoalText)
    // 使用函数式更新确保获取最新状态值
    setCourseGoals(currentCourseGoal=>[...currentCourseGoal,
      {text:enteredGoalText,id:Math.random().toString()},
    ])
  }
  
  return (
<View style={styles.appContainer}>
  <View style={styles.inputContainer}>
    <TextInput placeholder={'Enter Your Goal'} style={styles.textInput} onChangeText={goalInputHandeller}></TextInput>
    <Button title={'Add Goal'} onPress={addGoalHandeller}></Button>
  </View>
  <View style={styles.goalsContainer}>
    <FlatList data={courseGoal} renderItem={(itemData)=>{
      return <GoalItem text={itemData.item.text}/>
    }}
              keyExtractor={(item,index)=>{
                return item.id
              }}
              alwaysBounceVertical={false}
    />
  </View>
</View>
  );
}

const styles = StyleSheet.create({
  appContainer:{
    padding: 50,
    flex:1
  },
  inputContainer:{
    flex:1,
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center',
    marginBottom:24,
    borderBottomWidth:1,
    borderBottomColor:'#cccccc'
  },
  textInput:{
    borderWidth:1,
    borderColor:'#CCCCCC',
    width:'70%',
    marginRight:8,
    padding:8
  },
  goalsContainer:{
    flex:4
  },
  goalItem:{
    margin:8,
    padding:8,
    borderRadius: 6,
    backgroundColor:'#5e0acc',
  },
  // 修正样式名称拼写错误：goalTExt → goalText
  goalText:{
    color:'white'
  }
});

额外说明 #

• 在addGoalHandeller中，使用函数式更新（currentCourseGoal => [...]）替代直接引用courseGoal，确保每次添加目标时都基于最新的状态值，避免状态更新异常。
• 移除了App.js中注释掉的重复导入代码，保持代码整洁。

内容的提问来源于stack exchange，提问作者Sarthak Parikh