React Native报错：Element type is invalid 问题排查求助

报错提示的核心是Todo组件渲染时使用了未定义的元素，根源集中在以下几点：

• 错误导入Fragment：React Native的react-native包并不导出Fragment组件，你在Todo.js里从react-native导入Fragment会导致它是undefined，渲染时触发报错。
• onSavePress参数错误：Button的onPress回调不会传递参数，当前onSavePress试图接收label参数会导致传递给updateTodoLabel的值为undefined。
• 缺失editInput样式：代码中引用了styles.editInput但未定义，会引发样式警告。

修正后的Todo.js代码 #

// src/components/Todo.js
import React, { Fragment } from 'react' 
import { Text, StyleSheet, TextInput, Button, View } from 'react-native' 
 
const Todo = ({todo, updateTodoLabel}) => {
    const [editMode, setEditMode] = React.useState(false);  
    const [label, setLabel] = React.useState(todo.label); 

    const onEditPress = () => {
        setEditMode(true)
    }

    const onChange = (newLabel) => {
        setLabel(newLabel)
    }

    // 修正：直接使用组件内state中的label，无需接收参数
    const onSavePress = () => {
        updateTodoLabel(label)
        setEditMode(false)
    }

    const onCancelPress = () => {
        setEditMode(false)
        setLabel(todo.label)
    }

    const renderViewMode = () => (
        // 也可以直接用短语法<>替代<Fragment>，效果一致
        <Fragment> 
            <Text style={styles.todoLabel}>{todo.label}</Text> 
            <Button title="Edit" onPress={onEditPress} /> 
        </Fragment> 
    )

    const renderEditMode = () => (
        <Fragment> 
            <TextInput 
                style={[styles.editInput, styles.todoLabel]} 
                value={label} 
                onChangeText={onChange} 
                autoFocus 
            /> 
            <Button title="Save" onPress={onSavePress} /> 
            <Button title="Cancel" onPress={onCancelPress} /> 
        </Fragment> 
    )

    return (
        <View style={styles.todo}>
            {editMode ? renderEditMode() : renderViewMode() }  
        </View>
    ) 
} 

const styles = StyleSheet.create({ 
   todo: { 
       padding: 10, 
       borderTopWidth: 1, 
       borderStyle: 'solid', 
       borderColor: 'lightgray' 
   },
   todoLabel: { 
      fontSize: 18, 
      padding: 10, 
      flex: 1 
   },
   // 新增缺失的editInput样式
   editInput: {
       borderBottomWidth: 1,
       borderColor: '#ccc'
   }
}) 

export default Todo

额外说明 #

• 若不想显式导入Fragment，可以直接用短语法<>和</>替代，功能完全相同。
• 你的其他组件（App、TodoList）的导入导出逻辑均正确，无需修改。

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